context 예제 만들어보기

배운 것들을 활용하면 그럴싸한 예제를 만들어 볼 수 있습니다.

예제로 다뤘던 것들을 생각해봅시다. 프로필 생성기도 만들었고, 게슈탈트도 다뤄봤습니다. 리액트 16에 새로 추가된 Fragment도 알고 있습니다. 이러한 것들을 이용하면 context에 대해서 그럴싸한 예제를 만들어 낼 수 있습니다. 

콘텍스트 예제 바로가기

앞에 것들을 활용한 예제입니다.

컴포넌트는 게슈탈트를 이용했습니다. 수락 버튼을 누르면 "님과 친구가 되었습니다"라는 멘트로 바뀌고 맨 위에 사람 옆의 숫자가 올라갑니다. 취소를 누르면 숫자가 다시 줄어들고 "님이 친구요청을 했습니다"라고 바뀌게됩니다. 제 코드도 공유해드릴테니 비슷하게 만들어보셔도 되고, 참고해서 따로 다른 형태라도 만들어보세요~

예제 만들기

우선은 콘텍스트를 만들어야 합니다. 

저는 리덕스와 최대한 비슷한 형태로 만들기 위해 src 디렉토리 안에 store라는 파일을 만들고 코드를 작성했습니다. 콘텍스트도 Store라는 변수 안에 담았습니다.

생성자를 선언하고 그 안에 state를 정의했습니다. 또한 state를 Provider의 값으로 전달하기 때문에 필요한 함수도 state 안에 선언되어 있습니다. 여기서 주의할 점은 각 프로필에 isPermit이 정의되어 있다는 점과 생성자 안에 함수를 넣어도 bind(this)를 하지 않아도 되는 점입니다. 일단 각각의 프로필 안에 isPermit이라는 값이 있어야 저처럼 프로필 마다의 수락과 취소를 할 수 있습니다. 또 화살표 함수로 _togglePermit이라는 함수를 정의했기 때문에 bind(this)를 써서 따로 묶어줄 필요가 없습니다.

네비게이션에서는 friendNum이라는 함수를 정의했습니다. 프로필에서 Permit이 true인 친구목록을 만들어서 숫자를 리턴하는 함수입니다. 이 함수를 정의하고 나서 컴포넌트 안에서는 컨슈머를 통해 프로필을 가져와서 friendNum이라는 함수 안에 넣었습니다.

이처럼 게슈탈트와 같은 프레임워크를 이용하면 깔끔하게 사용할 수 있는 컴포넌트를 빠르게 얻을 수 있고, 그럴싸한 예제를 만들 수 있습니다. 한번 만들어보세요. 프로그래밍의 재미를 느껴보세요!

다음 포스팅은 styled components를 다뤄보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.