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 값을 부여하는 방식이 아..