[React] 리액트 내부 상태관리

React 내부에서 상태를 관리하는 방법

1. state와 props

리액트에서 상태 관리를 위한 기본적인 방법은 컴포넌트의 state와 props를 사용하는 것이다.

state는 컴포넌트 내부에서 관리되는 데이터를 저장하며, props는 부모 컴포넌트로부터 전달되는 데이터를 의미한다.

setState 함수를 통해 state를 업데이트하면 화면이 리렌더링된다.

2. Context API

Context API는 React version 16부터 사용 가능한 리액트의 내장 API이다.

앱의 모든 컴포넌트에서 사용할 데이터를 전달해야할 때 유용하다.

2-1. Context API 사용법

React.createContext (컨텍스트의 생성)

const MyContext = React.createContext();

상위 레벨에 매칭되는 provider가 없는 경우에 기본값이 사용된다.

Context.Provider

하위 컴포넌트들이 컨택스트의 데이터를 받을 수 있도록 하기 위해 provider를 사용한다.

<MyContext.Provider value={특정 값}>

특정한 컨텍스트의 데이터에 대한 접근 권한을 주기 위해서는 Context.Provider로 하위 컴포넌트들을 감싸주면 된다.

Provider에는 value라는 prop이 있고, 이 prop은 Provider 컴포넌트 하위에 있는 컴포넌트들에 전달된다.

Context.Consumer

<MyContext.Consumer>
  {value => /*컨택스트 값에 따른 컴포넌트의 렌더링 발생*/}

컨택스트를 구독하여 myContext의 데이터에 접근 가능하게 해준다.