항해99 5주자 이야기
01 이번주 질문 : 라이프사이클(클래스형, 함수형)
리액트는 컴포컨트가 생성되고 소멸되는 과정이 반복되며 SPA를 다채롭게 만들어낸다. 이 과정에 있어서 기존문법인 Class를 통해서 컴포넌트를 생성할 때 중요하게 다루어졌던 부분이었다. 생성(마운트)되었을 때, 업데이트 되었을 때, 제거(언마운트) 되었을 때에 따라서 화면이 렌더링되며 동작하였다. 출처, 벨로퍼트
01) 리액트생명주기 - 생성(Mount)
생성 단계는 렌더링 과정을 통해서 DOM에 최초로 컴포넌트가 그려지는 단계를 말한다.
02) 리액트생명주기 - 변경(Update)
컴포넌트에 props 혹은 state 의 변화가 감지되면, 화면이 새롭게 리렌더링 되면서, 변경된 DOM을 적용시킨다.
03) 리액트생명주기 - 제거(Unmount)
뷰에서 해당 컴포넌트가 제거되는 것을 말한다.
04) 리액트생명주기 - 함수형컴포넌트
함수형으로 선언된 컴포넌트의 생성(마운트) 상황과 제거(언마운트) 상황에서는 HOOK이 사용된다. 바로 useEffect()이다.
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('컴포넌트가 화면에서 사라짐');
};
}, []);그리고 useEffect()는 기록된 [의존성배열]에 따라서 생성되었을 때 뿐 아니라, 업데이트가 발생되었을 때 다시 실행시킬 수 있다. 그리고 제거시에는 return ()=> {} 안에 기록된 내용을 통해서 제거할 수 있다.
02 이번주 질문 : ReactHook
리액트에서는 컴포넌트를 제어할 때 사용할 수 있는 다양한 Hook들을 제공한다. 나아가 커스텀하여 사용자가 필요한 훅을 제작할 수도 있다. 공식문서에 따르면, 리액트 HOOK란 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있는 기능이라고 정의한다. 항해 99의 5주차를 넘어 6주차로 들어가면서 그동안 배운 훅들을 활용하여 프로젝트를 진행하였는데, 모든 학습이 그러하듯 이 부분에서도 복습이 요구되었다. 대표적으로 useContext()의 경우 사용하는 방법을 망각하여 다시 복습해야 했다.
useState()
먼저 이번 프로젝트에서는 주간/다크모드를 구현해보았다. 최상위컴포넌트에 useState()를 선언하였고, 뷰 오른쪽하단에 있는 버튼을 통해서 state 값을 변경함으로 이를 제어하고자 하였다.
이를 위해서 Toggle을 제어할 상태를 아래와 같이 선언하였다.
const [pageSkin, setPageSkin] = useState(false)
// false 는 주간모드의 상황을
// true 는 다크모드의 상황을 제어하기 선언된 상태이다. 그리고 이를 전역에서 사용하기 위해서 useContext()를 사용하였다.
export const PageSkinContext = createContext();
const App = () => {
const [pageSkin, setPageSkin] = useState(false)
const darkdayToggle = ()=> {
setPageSkin(pre=> !pre)
}
return (
<>
<PageSkinContext.Provider value={{pageSkin}}>
<GlobalStyled pageSkin={pageSkin}/>
<Router />
<div
className="darkdayToggle"
onClick={darkdayToggle}
style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
{pageSkin ? <BsSun /> : <BsMoonFill/>}
</div>
</PageSkinContext.Provider>
</>
);
};이를 사용하고자 하는 Provider에 속한 하위 컴포넌트에서는 const {pageSkin} = useContext(PageSkinContext);를 선언함으로 useContext()를 통해서 관리받고 있는 상태를 호출하였고, 각각의 상황에 따라 해당 내용을 props로 전달하여, styled-components로 구성한 컴포넌트들이 제어되도록 하였다.
03 이번주의 항해 : 주특기 3주차
이번주에는 정말 많은 것을 배웠다.
- yarn add @reduxjs/toolkit
- @reduxjs/toolkit : ThunkAPI
- yarn add react-query
- yarn add json-server
- 환경변수 설정
- http 인스턴스 생성
먼저 툴킷은 리덕스의 중앙관리소에서 Ducks 패턴(벨로퍼트, 강의)을 간소화할 뿐만 아니라, 다양한 기능이 포함된 redux 확장팩을 말한다. 이 툴킷 안에는 ThunkAPI가 포함되어 있는데, 기존의 리덕스의 dispatch는 단순히 객체를 전달하기 때문에 함수를 통한 기능을 수행할 수 없었다. 그래서 등장한 개념이 ThunkAPI이다. 이를 통해서 개발자는 비동기처리를 할 수 있게 되었고, 이는 서버통신을 통해서 상태를 변경하고 조회하고, 수정하고, 삭제할 수 있는 것이 가능해졌다는 것을 의미한다. 기전의 함수형 컴포넌트느 새로고침을 하면 함수에 저장된 값이 초기화 되기 때문에 보관할 수 없기 때문이다. 그러나 이를 바르게 사용하기 위해서는 새로고침조차 없는 SPA의 특징이 잘 반영되어야 하는데, 이는 불변성 때문에 리액트가 알아차리지 못한다는 아쉬음이 있다. 그래서 aysnc와 awatit를 적절하게 사용하고, 여기에 옵셔널체이닝을 더하여, 뷰에 원하는 겂을 전달하는 내용이 요구된다.
여기에 나아가 react-query는 중앙저장소가 필요없이 서버와 통신을 함으로 정보를 받아온다면, 불필요하게 리덕스를 설치하지 않아도 된다는 것을 가능하게 해주는 비동기통신을 통해서 상태를 관리할 수 있는 라이브러리를 지원한다. 이를 활용하면 toolkit의 복잡한 코드가 더 간결해질 수 있다.
나아가 서버와 통신을 한다는 것은 사용할 수 있는 서버가 구축되어야 하는데, 개발환경에서 매번 서버가 존재해야된다는 것은 어려운 일이다. 더군다나 풀스택이라면 가능하겠지만, 프론트엔드개발자로서 서버를 구축한다는 것은 어려운 일이기에 가짜서버를 활용할 수 있어야 하는데, 이를 위해서 등장한 개념이 json-server이다. 이를 통해서 프론트엔드 개발자는 서버를 별도로 구축할 필요없이 서버통신을 구현할 수 있는 환경 속에서 코드를 실험할 수 있다.
그리고 이렇게 서버와의 통신은 긴밀한 보안이 요구되는데, 이는 통신을 할 url이 다뤄지기 떼문이다. 해당 url이 유출된다면, 해당 url을 가진 모두가 서버에 접근애 값을 탈취할 수도 변경할 수도 있게되기 때문이다. 이를 위해서 환경변수 를 선언함으로 url을 감출 수 있다. 그리고 이는 .gitignore 파일에 기록함으로 로컬에서만 보관해야 안전을 보장받을 수 있음을 기억해야 한다.
04 이번주의 항해 : 돌아보기
이번주의 항해는 많은 내용을 학습해야 하는 심화주차라는 점에서 버거웠다. 그래서 많은 내용을 글로 정리하기 보다는 깃헙에 올려두는 방식으로 내용을 처리하였다. 그런데 정리가 되지 않은 내용이다보니, 다소 산만함이 있다. 그럼에도 비동기 처리를 위한 대표적인 방법인 ThunkAPI와 react-query 에 대해서는 나름 잘 정리하였다.
내게 있어서 약간의 필살 정리본이다. 해당 내용이 기억나지 않을 때는 언제나 이곳을 찾아갈 것 같다. OT주차를 포함하면, 벌써 6주차를 수행하였다. 짧은 기간이었지만 몰입효과가 가져다 주는 효과는 엄청난 것 같다.
그리고 이번주에는 스파르타코딩클럽(항해99) 본사에 초대를 받았다. 항해99가 시작된 이후 처음으로 진행 중간에 모인 선상파티였다. 맛있는 김밥과 닭강정을 준비해주셨고, 강의도 너무나 훌륭했다. 더군다나, 협업으로 들어가기 전에 사전에 백엔드 개발자 분들과 소통할 수 있어서 좋았던 것 같다.
사람은 안다면, 대화에 있어서 더욱 신중할 수밖에 없고, 또한 이해할 수 있는 배경이 되기 때문이다. 그런 의미에서 뒷풀이자리를 참여했고 현재 6주차로 나아가는 가운데 함께할 팀원들을 사전에 만날 수 있었다. 어제 있었던 내용은 다음주에 기록하게 되었지만, 토큰의 값을 서버로부터 받아오는 과정에 있어서 트러블 이슈가 있었다. 결국에는 새벽5시까지의 5시간이 넘는 토론의 과정에서 어떤 것이 맞고 틀리는지에 대해서 대화할 수 있었고, 우리는 해결했고, 다른조들보다 빨리 회원가입의 과정을 구축하였다.
위의 사진에서 파랑니트를 입고 계신 분이 현재 함께 협업을 하고 있는 팀원분이시다. 발전하며 나아갈 다음주를 고대하며, 한주도 힘찬 나아감을 시작해보고자 한다.
