리액트

15장 context API

KairoYang 2020. 4. 17. 13:27

Context API는 리액트 프로젝트에서 전역적을 사용할 데이터가 있을 때 유용한 기능이다.(로그인 정보, 어플맄케이션 환경설정, 테마) - 리덕스,리액트 라우터,styled-component가 context api 기반.

 

리액트 어플리케이션은 컴포넌트 간에 데이터를 props로 전달한다. 주로 최상위 app의 state 를 넣어 관리.

위에서 아래로 계속 내려가면 유지 보수성이 낮아진다. 

 

 Render Props- renderpropssample에게 children props로 파라미터에 2를 곱해서 반환하는 함수를 전달하면 해당 컴포넌트에서는 이 함수 5를 인자로 넣어서 "결과: 10"을 렌더링한다.

 

const RenderPropsSample = ({children}) =>{

  return <div>결과: {children(5)}</div> };

 

<RenderPropsSample>{value => 2 * value}</RenderPropsSample>

 

provider를 사용허묜  Context의 value를 변경할 수있다.

-<ColorContext.Provider value=({color:red})>로 value값 명시.