useState(initialState) 컴포넌트의 최상위 레벨에서 useState를 호출하여 state 변수를 선언하세요. import { useState } from 'react';function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // ...Parameters initialState : 초기 state 설정할 값입니다. 값은 모든 데이터 타입이 허용되지만 , 함수에 대해서는 특별한 동작이 있습니다. 이 인자는 초기 렌더링 이후에는 무시됩니다. 함수를 init..

State HooksState 를 사용하면 컴포넌트가 사용자 입력과 같은 정보를 "기억" 할 수 있습니다. 예를 들어 , form 컴포넌트는 state를 사용하여 입력 값을 저장하고 , 이미지 갤러리 컴포넌트는 state를 사용하여 선택한 이미지의 인덱스를 저장할 수 있습니다.function ImageGallery() {⁠ const [index, setIndex] = useState(0); ⁠ // ...   ⁠Context Hookscontext 를 사용하면 컴포넌트가 prop으로 전달하지 않고 멀리 떨어진 부모로부터 정보를 받을 수 있습니다. 예를 들어 , 앱의 최상위 컴포넌트는 아무리 깊이 있떠라도 현재 UI 테마를 아래의 모든 컴포넌트에 전달할 수 있습니다.function Button() ..

immutability ( 변경불가성 ) 은 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미# immutable value vs mutable valuejavascript의 원시 타입 ( primitive data type ) 은 변경 불가능한 값 ( immutable value )BooleannullundefinedNumberStringSymbol원시 타입 제외 모든 값은 객체 (Object) 타입이며 변경 가능한 값 ( mutable value )let str = 'hi';str = 'bye'; 식별자 str은 메모리에 생성된 문자열 'hi'의 메모리 주소를 가리키게 되고 두번째 구문이 실행되면 생성된 문자열 'hi'을 수정하는 것이 아니라 새로운 문자열 'bye'를 메모리에 생성하..

ES5 vs ES6 # 변수 선언 방식의 차이▶ ES5 : var 만 존재 재할당과 재선언에 자유로움 호이스팅 문제 ★ 호이스팅 : 코드가 실행되기 전 변수선언 | 함수선언이 해당 유효범위의 최상단으로 끌어 올려지는 것과 같은 현상 ▶ ES6 : let , const 추가 호이스팅 문제를 해결하기 위해 let , const 추가 let : 선언된 변수는 동일한 이름으로 선언 x , 재할당은 o const : 재선언 , 재할당 x   변수스코프재할당재선언var함수 스코프 가능가능let블록 스코프가능불가능const블록 스코프불가능불가능 // var console.log(americano);var americano = 'Americano is the most delicious coffee';-> output ..

❗️에러메모❗️  react 에서 .map을 사용할 경우가 있습니다. 저의 경우에는 카드 영역의 리스트들을 .map을 통해 카드 컴포넌트들을 반환해 주고 있었는데요. 다음과 같은 error 를 뱉어 내서 당황스러웠습니다.Warning: Each child in a list should have a unique "key" prop.직역해 보면 ⁠ ⁠경고: 목록의 각 하위 항목에는 고유한 "key" 속성이 있어야 합니다 ⁠.map을 통해 컴포넌트의 고유한 key 값을 prop 으로 넘겨주면 되겠다 싶었는데 , 해결되지 않았습니다.  Ex-code) postState.posts.map((post,idx) => ( )) .map 함수 몸체에 있는 BlogCard 컴포넌트에 key 값을 부여하는 방식이 아..

TL;DR( feat . 부모가 자식에게 props 를 .... )   블로그에 다크모드 기능을 추가하다가 , 상위 컴포넌트에서 하위 컴포넌트's 에게 props를 보내야할 경우가 있었습니다. but.. 하위컴포넌트에서 다시 하위컴포넌트로 props를 내려줘야 하는 상황상황상황이 생겼습니다. 그리하여 하위 컴포넌트에 props로 계속 내려주는게 아닌 어딘가에 저장을 해놓고 루트 레벨에 상관없는 컴포넌트들이 가져다가 사용할 수는 없을까 싶어 알아보다가 react-context api 라는것을 알게되어 정리하게 되었습니다.# 언제 사용해야할까 ?Context는 React 컴포넌트 트리 안에서 전역적(global) 이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이며 ex) 로그인한 유저 , 테마 ..