TIL/REACT13 contextAPI, provider 설정, createContext( ) createContext ( ) 기본 값을 넣을 수 있다. contextAPI 접근하고 싶은 COMPONENT를 PROVIDER로 묶어준다. 데이터는 value 에 넣는다. 자식 컴포넌트에서도 데이터값을 접근할 수 있다. 값은 value안에다 넣어주어야 한다. const TableContext = createContext( { tableData : [ ], dispatch : ( ) => { }, }); const value = useContext(TableContext); useMemo를 사용하여 새로운 객체가 생기지 않도록 도와준다. 렌더링을 하면 객체가 생겨 자식 컴포넌트에게 전달이 될 수 있기 때문임. 그 후, 언제 바뀌는지 배열 안쪽에 선언해주면 된다. const value = useMemo (.. 2019. 10. 17. dispatch ( { } ), action 객체를 실행. reducer 기록 dispatch ( { } ), {action} 객체를 실행한다. ex) const SET_WINNER = 'SET_WINNER'; const reducer = ( state, action ) => { switch ( action.type ) { case SET_WINNER: //state.winner = action.winner; 이렇게 하면 안됨. return { ...state, // 기존 state spread 후, action 실행. winner : action.winner, } } } const onClickTable = useCallBack( ( ) => { // action객체를 dispatch해서 state를 바꿔준다. dispatch( { type : 'SET WINNER' , winn.. 2019. 10. 17. 클래스와 hooks 라이프사이클 비교. <reminder> memo useEffect는 여러번 사용 가능하다. state마다 efffect를 사용 할 수 있기 때문임. [배열에는 꼭 useEffect를 다시 실행할 값만 넣어야 한다. 관련 없는 state를 넣으면 동작이 이상해진다.] Hooks에서 부모 컴포넌트에서 child 컴포넌트를 가지고 있으면 부모 컴포넌트가 렌더링 될때마다 무조건 child도 무조건 변경된다. 따라서 => memo를 사용한다. memo가 함수 컴포넌트를 감싸준다. props가 바뀌면 리렌더링이 되는데 memo 를 사용하여 감싸줘야 re-rendering을 방지한다. memo를 넣으면 pureComponent 역할을 한다. 렌더링 성능 최적화에도 도움된다. useEffect를 조금 쉽게 이해하는 방법 => componentDidMount com.. 2019. 10. 12. prev 1 2 3 4 5 next