리액트
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값 명시.