Context 파일 수정하기
Context의 value에는 무조건 상태 값만 있어야 하는 것은 아닙니다. 함수를 전달해 줄 수도 있습니다.
기존에 작성한 ColorContext의 코드를 아래처럼 수정해줍니다.
위 파일에서 ColorProvier라는 컴포넌트를 새로 작성했습니다. 그리고 그 컴포넌트에서 ColorContext.Provider를 렌더링 하고 있고 이 Provider의 value에는 상태는 state로, 업데이트 함수는 actions로 묶어서 전달, 이 Context에서 값을 동적으로 사용할 땐 반드시 묶어 줄 필요는 없으나 이렇게 state와 actions 객체를 따로 분리해주면 나중에 다른 컴포넌트에서 Context의 값을 사용할 때 편합니다.
추가로 createContext를 사용할 때 기본값으로 사용할 객체도 수정했습니다. createContext의 기본값은 실제 Provider의 value에 넣는 객체의 행태와 일치시켜 주는 것이 좋습니다. 그렇게 하면 Context 코드를 볼 때 내부 값이 어떻게 구성되어 있는지 파악하기 쉽고 실수로 Provider를 사용하지 않았을 때도 리액트 애플리케이션에서 에러가 발생하지 않습니다.
새로워진 Context를 프로젝트에 반영하기
App 컴포넌트에서 ColorContext.Provider를 ColorProvider로 바꿔줍니다.
위 구조에서 비구조화 할당 문법을 사용하면 다음과 같이 value를 조회하는 것을 생략할 수 있습니다.
코드 작성 후 브라우저를 확인 해보면
위와 같이 나오게 됩니다.
색상 선택 컴포넌트 만들기
이번에는 Context의 actions에 넣어 준 함수를 호출하는 컴포넌트를 만들겠습니다. components 디렉터리에 SelectColor.js라는 파일을 생성하여 다음 코드를 작성해 봅시다.
다 작성한 후에 해당 컴포넌트를 App 컴포넌에서 ColorBox위에 렌더링 하면 됩니다.
다음처럼 나오면 성공입니다.
이제 마우스 오른쪽 버튼 클릭시 작은 정사각형의 색상이 바뀌도록 구현해 보겠습니다.
SelectColor.js의 SelectColor 부분을 위처럼 바꿔주면 됩니다.
마우스 오른쪽 버튼 클릭 이벤트는 onContextMenu를 사용하면 됩니다. 오른쪽 클릭 시 원래 브라우저 메뉴가 나타나나 여기서 e.preventDefault()를 호출하면 메뉴가 뜨지 않습니다. 브라우저를 열어서 SelectColors에 있는 정사각형을 왼쪽이나 오른쪽 버튼으로 클릭하면 색상이 바뀌게 됩니다.
