친구들과 함께 op.gg 클론 코딩을 진행 하기로 하였고, 그 중 나는 웹 파트를 맡게 되었다. 리액트를 사용해 진행하기로 하였고, 그날 그날 간단하게 새로 배운 사실들을 적어보기로 했다.
SPA방식
SPA는 Single Page Application의 약자이다. 기존에는 페이지를 요청할때마다 서버에서 받아와서 새로고침이 되었지만, SPA는 서버에서 제공하는 페이지가 한 개이며, 필요한 부분만 다시 랜더링하는 방식이다.함수형 컴포넌트
리액트 책을 구매 했는데, 이 책은 클래스형 컴포넌트 방식으로 서술되어 있었다. 요즘은 함수형 컴포넌트로 구현을 하는 경우가 많다고 들어서 나도 함수형 컴포넌트로 진행하고 있다.함수형 컴포넌트는 기존의 클래스형 컴포넌트와 달리 state가 없고, 생명주기 함수를 사용할 수 없다. 그 대신 이를 지원하기 위해 훅이 도입되었다. render가 없어 return만 해주면 된다. 지금까진 {useState, useEffect}만 사용 했다.
useState는 다음과 같은 방식으로 사용할 수 있다.
const [email, setEmail] = useState(''); 의 형태로 선언하면 된다. email이 이 컴포넌트에서 사용할 수 있는 상태이다. setEmail()함수로 email 상태의 값을 변경할 수 있다.
useEffect란 랜더링, 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트를 해주는 함수이다. dependency에 선언한 배열의 값으로 useEffect를 원할 때 실행시킬 수 도 있다.
react-router-dom
SPA를 달성하기 위해 매우 중요한 라이브러리이다. 기존의 글들을 보면 v5인 글이 많은데, 현재 버전인 v6로 넘어오면서 많은 것들이 달라졌다. 참고한 블로그들 링크를 여기에 달아두고, 필요할 때 마다 참고하자.https://velog.io/@velopert/react-router-v6-tutorial
https://velog.io/@yoosion030/react-router-dom-v6
이 두 벨로그에서 많이 참고를 하여 개발을 진행중이다. 아직도 어렵지만 계속해서 쓰다보면 익숙해지겠지..?
recoil과 globalState
recoil은 리액트의 상태관리 라이브러리이며 메타에서 오픈소스로 공개한 라이브러리이다. atom과 selectors 그리고 useRecoilState를 통해 상태를 관리할 수 있다.나는 로그인 / 로그아웃 기능 구현에만 해당 기능을 사용하여 selectors를 쓰지도 않았고, 단순히 atom을 이용해 globalState를 지정해 주었고, useRecoilState를 통해 값을 사용하여 login / logout 기능 및 로그인 유지를 만들 수 있었다. recoil에 관해 정리한 좋은 글이 있어 링크를 달아놓고, 필요할 때 참고하자.
아직 초반 단계라 리액트에 관해 복잡하게는 다루지 못했지만, Javascript도 제대로 모르고 부딪히니깐 너무 어렵다... op.gg 클론코딩을 진행하면서 많이 배워보고 싶다..!
안녕 :P