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() ..

❗️에러메모❗️  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) 로그인한 유저 , 테마 ..

부모 : Home() 자식 : HeaderBar() 현재 상황 Home() 함수는 동기로 api 통신을 하여 데이터를 받아온뒤 posts ( object type ) 에 저장을 하고 , props로 {posts}를 받고 있는 형태이며 , 받은 데이터를 return 을 통해 화면에 카드 리스트 형태로 출력되는 상황 기존화면에서 검색 필터 기능이 필요하여 작업하다가 (1) 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 (2) 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 (1) + (2) 가 동시에 발생해야 하는 상황이 발생... 그러다가 자식 컴포넌트 props 로 함수 자체를 넘길수 있다는 것을 알게되었다..!! @@@@  export default function Home({posts}) { cons..

블로그를 만들던 중에 , hygraph 에서 내가만든 컨텐츠 내용을 가져오는 부분이 있었는데 , hygraph에서 제공해주는 api를 통해서 content 내역을 string 가져와 그대로 뿌려주다 보니 , string 으로 된 html을 우리가 알고있는 html 형태로 바꿔줘야 하는 문제가 생겼다.그러다가 알게된 dangerouslySetInnerHTML .. ! 어마어마한 녀석을 알게되었다. dangerouslySetInnerHTML 은 무엇인가 ?-> 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법 사용방법function createMarkup() { return {__html: 'First · Second'};} 적용예제export default func..