react-tutorial
react-tutorial copied to clipboard
velopert
22. Context API 를 사용한 전역 값 관리 · GitBook
22. Context API 를 사용한 전역 값 관리 · GitBook
undefined
https://react.vlpt.us/basic/22-context-dispatch.html
잘 보았습니다!
마지막 숙제를 하고 답안을 확인해보았는데 궁금한점이 있습니다.
function CreateUser() { ... }
이런식으로 함수표현식으로 그대로 작성했는데요 답안에서는
const CreateUser = () => { ... }
이런식으로 함수 선언식으로 되어 있던데 혹시 어떤부분에서 차이가 있는지 궁금합니다.
실제로 유저를 등록했을때 같게 작동했습니다!
관련없는 답일수도 있지만 함수표현식과 선언식은 자바스크립트 문법상 'hoisting'이라는 부분에서 차이가 생깁니다. 그게 리액트와 관련해서 상관이 있는건지 없는 건지는 아직 모르겠습니다..!
@byseop
차이가 없다고 보아도 무방합니다. 가끔씩은 화살표함수로 작성하는것이 코드가 조금 더 간결하기도 한데 (return 을 생략 할 수도 있기 때문에) 리액트 매뉴얼이나, 해외의 개발자들이 작성한 컴포넌트들을 보면 function 키워드를 사용하는 형태가 많아서 이 튜토리얼에서도 function 을 사용하였습니다.
단, TypeScript 를 사용하는 경우에는 일반적으로 화살표함수로 선언합니다. 이에 관한 내용은 곧 업데이트 될 예정입니다 ㅎㅎ
숙제하고 궁금한 점이 생겨서 질문합니다!! 선생님께서 CreateUser.js 안에 있는 CreateUser 함수를 쓸 때, useCallback으로 감싸지 않으셨더라구요. 숙제 전의 코드는
const onCreate = useCallback(() => {
dispatch({
type: 'CREATE_USER',
user: {
id: nextId.current,
username,
email
}
});
reset(); /* useInputs에서 받아온 reset 함수 호출 */
nextId.current += 1;
}, [username, email, reset]);
이렇게 useCallback으로 감쌌었는데, 이게 의미가 없어져서 없애신건지, 아니면 현재 위치에서도 재활용 등 이점이 있는지 궁금합니다 ㅎㅎ
Context API : 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리
const UserDispatch = React.createContext(null); <UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider> Context 안에 Provider 컴포넌트를 통하여 Context 의 값을 정함(& value값 설정) Provider 에 의하여 감싸진 컴포넌트 중 어디서든지 Context 의 값을 바로 조회
useReducer의 dispatch 를 Context API 를 사용해서 전역 사용 컴포넌트에게 함수를 전달해줘야 하는 상황에서 코드의 구조가 훨씬 깔끔해짐
Context API 로 dispatch 를 전달해줄 수 있다는 건 놀라운 일이네요. reducer() 를 작성할 때, localStorage 같은 곳에 state 전체를 Json 으로 보관하도록 해두면, 프로젝트 전역에서 state 전체를 언제든 참조할 수도 있지 않을까요? 전역변수 남발 같은 bad idea 이겠지만, 가능은 하겠군요 ㅋ
