JEEYOUNG.ME

useReducer는 전역 상태나 여러 컴포넌트에서 공유되는 복잡한 상태를 관리할 때 유용함. 간단한건 useState를 사용함. 둘다 상태를 변경하는 훅이라는건 동일하다. #예시 - 사용자 입력값의 상태를 나타내는 inputState와, 유효성 검사결과를 나타내는 isValid 상태가 있다고 가정. - 이때 inputState에 따라서 isValid는 true, false로 상태가 달라지게된다. 두 상태값이 서로 연결되어있음. - 요럴때 useState를 두번 작성하기보다, useReducer를 사용해도 된다는거임! 상태를 정의할 컴포넌트 바깥에 reducer 함수를 정의한다. 컴포넌트 내부에 상태를 정의하고, input의 value가 변경될때마다 실행되는 트리거함수도 정의함. 이때, 트리거함수가 실행..

React Router의 Link 컴포넌트와 일반적인 HTML 태그를 사용하는 것의 차이점 #브라우저 내비게이션 방식 태그: 클릭 시 페이지가 새로고침되면서 링크된 주소로 이동한다. Link 컴포넌트: 클릭 시 페이지가 새로고침되지 않고, React Router가 관리하는 페이지로 이동. #SPA에서의 사용 태그: SPA에서는 새로운 페이지를 로딩할 때마다 애플리케이션의 상태를 잃어버릴 수 있다. Link 컴포넌트: SPA에서는 새로운 페이지를 로딩하지 않기 때문에 애플리케이션의 상태를 유지하면서 페이지 간 전환을 수행할 수 있음. 동적라우팅 처리

shoes 라는 [{}, {}, {}] 이런 형태의 객체의 배열이 있음 서버로부터 받아온 똑같은 타입의 데이터들을 shoes에 추가하여 상태를 업데이트 하고자함. 스프레드 연산자를 사용해 배열로 감싸주면 간단히 해결! 🤩

ES6(ECMAScript 2015) 에서 새로 생긴 spread operator. spread operator는 반복 가능한(iterable) 객체에 적용할 수 있는 문법으로, 배열이나 문자열 등을 개별 요소로 분리시킬 수 있다. // ES6에서는 배열에 대한 스프레드 문법 사용 가능 const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; 사용하는 이유?🤔 원본배열 또는 객체를 변경하지 않고 새로운 복사본을 만들기 위해서다. 자바스크립트에서 배열과 객체는 참조에 의해 전달되기 때문에 그냥 대입하면 참조 주소만 복사되어 두 변수가 같은 객체를 가리키게 됨. 스프레드 문법 사용할때 vs 사용안할때 차이점은? // 원본 배열 const originalArray = [..

컴포넌트간에 props 전달 규칙 props를 전달할때 부모 -> 자식 컴포넌트로 전송이 가능하다. 반대로, 자식 -> 부모로는 전달 불가X 같은 루트에 위치한 컴포넌트 끼리도 전달 불가X Q. 특정 State가 부모와 자식 컴포넌트 둘다에서 필요하다. 이때 state 정의는 어디에 해야할까? 👉 부모 컴포넌트. 최상위 컴포넌트에 만드는것이 일반적임.

https://programmers.co.kr/learn/courses/30/lessons/42748?language=javascript 코딩테스트 연습 - K번째수 [1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3] programmers.co.kr 📍 문제 📍 풀이 사용한 메소드는 다음과 같다. slice(start, end): start 인덱스부터 end 인덱스 이전까지 슬라이싱한 배열 반환 sort: 정렬메소드 push: 배열 오른쪽으로 원소 추가됨 코드 작성은 어렵지않은데, sort() 정렬부분에서 주의할점이 있다. 만약 다음과같이 sort()만 해주면 오류가 날것이다. 왜냐하면 자바스크립트는 기본적으로 유니코드 문자열을 비교해서 ..

https://programmers.co.kr/learn/courses/30/lessons/17681?language=python3 코딩테스트 연습 - [1차] 비밀지도 비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다 programmers.co.kr 풀이과정 요약 비트연산자 or을 사용한 연산결과를 이진수로 표현해서 저장한다. 이진수 결과를 하나씩 탐색하면서 1은 #으로, 0은 공백으로 문자열 치환을 해주었다. 전체 코드 def solution(n, arr1, arr2): answer = [] dec_arr = list(zip(arr1, arr2)) bin_arr = [..

딕셔너리 자료형을 리스트로 변환해야할때 다음과 같이 튜플 리스트로 변환시킬 수 있다. dict = {'a': 4, 'b': 6, 'c': 1} # key, value 값 각각 뽑아내기 print(dict.keys()) # dict_keys(['a', 'b', 'c']) print(dict.values()) # dict_values([4, 6, 1]) # 딕셔너리를 튜플 리스트로 변환 result = list(zip(dict.keys(), dict.values())) print(result) # [('a', 4), ('b', 6), ('c', 1)] # value 기준으로 정렬하기 # 오름차순 정렬 print(sorted(result, key=lambda x: x[1])) # [('c', 1), ('a',..

https://programmers.co.kr/learn/courses/30/lessons/64065 코딩테스트 연습 - 튜플 "{{2},{2,1},{2,1,3},{2,1,3,4}}" [2, 1, 3, 4] "{{1,2,3},{2,1},{1,2,4,3},{2}}" [2, 1, 3, 4] "{{4,2,3},{3},{2,3,4,1},{2,3}}" [3, 2, 4, 1] programmers.co.kr 풀이과정 중복되는 원소가 없는 튜플을 집합기호로 표현된 입력이 주어진다. 예를들어 튜플이 (2, 1, 3, 4)인 경우 {{2}, {2, 1}, {2, 1, 3}, {2, 1, 3, 4}} {{2, 1, 3, 4}, {2}, {2, 1, 3}, {2, 1}} {{1, 2, 3}, {2, 1}, {1, 2, 4,..

Ajax란? Ajax는 자바스크립트를 사용해 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. Ajax는 XMLHttpRequest 객체를 기반으로 동작하며, http 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 전통적인 웹페이지의 생명주기 예전의 웹페이지는 완전한 html 태그로 감싸진 html 파일을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 랜더링 하는 방식으로 동작했다. 따라서 클라이언트가 화면전환을 요청하면, 서버로부터 새로운 html을 전송받아 웹페이지 전체를 다시 새로고침 해야했다. 위와 같이 동작하면 어떤 단점이 있을까? 1. 변경될 필요가 없는 부분까지 매번 서버로부터 재전송 받기때문에 불..