김도리의 개발자로서 성장기

useState 동작원리 함수형 컴포넌트에서는 useState를 통해 상태값을 변경할 수 있다. const [state, setState] = useState(초기값); setState라는 함수를 setter로서 사용한다. 여기서 한가지 오해하는 개념은 setState 함수를 호출하면 state라는 변수의 값이 변경된다는 것이다. => 이것은 잘못된 개념이다. state는 const로 선언되어 있으므로 상태값 변경 불가하다. setState로 상태값을 변경하면 useState 함수 밖에 선언되어있는 어느 전역변수인 value 값을 변경해준 것이지 state라는 변수 자체의 상태값을 변경해준 것이 아니다. 여기서 Closure 개념이 사용된다. Closure는 다수의 명령 흐름들을 하나의 Closure로 ..

Context API란? 컴포넌트간 공동으로 사용해야할 데이터가 있다면 props를 사용했었다. props로만 데이터에 전달할 때 깊이가 깊어지면 여러 컴포넌트를 거쳐 받아야해서 불편하고 실수할 가능성이 커진다. 이렇게 리액트 프로젝트 내에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이 Context API이다. 리덕스, 리액트 라우터, styled-components 등의 리액트 라이브러리들도 Context API 기반으로 구현되어 있다. 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한번에 원하는 값을 받아와서 사용할 수 있다. Context API 사용법 1. 새 Context 만들기 ..