Engineering/React
리액트 훅은 왜 조건문 안에서 쓸 수 없을까?
그 동안 리액트훅을 사용할 때 리액트 컴포넌트 함수의 최상위에서 훅을 항상 호출해서 사용했기 때문에 너무나 당연하게 조건문이나 반복문 안에서 사용할 생각을 하지 않았다. 하지만 왜 그렇게 하는 것인지에 대해 생각해보지 못했고, 오키 질문에도 나처럼 궁금해 하시는 분들이 계신 거 같아 이번 기회에 정리해서 함께 공유하면 좋을 거 같다. 실제로 현재 진행중인 프로젝트에서 조건문 안에 useEffect 훅을 호출하면 아래와 같이 린트 에러가 발생한다. 에러 메세지를 읽어보면, 리액트 훅은 렌더링 시 반드시 동일한 순서로 불려야 하기 때문에 조건적으로 호출되면 안된다고 말하고 있다. 실제 리액트의 공식문서에서도 리액트 훅과 관련된 규칙으로 다음과 같이 안내되어 있다. - 반복문, 조건문 혹은 중첩된 함수 내에서..
리액트의 라이프사이클(Life Cycle)에 대해 알아보자
✔️라이프사이클이란? 리액트는 컴포넌트 단위로 개발하게 되는데 이때 각 컴포넌트들은 라이프사이클 즉, 생명주기를 가지고 있다. 생명주기는 생성부터 시작하여 업데이트가 되기도 하며 마지막에는 소멸되는 과정을 거치게 된다. 클래스형 컴포넌트에선 주로 생명주기 메서드를 통해 라이프사이클에 따라 컴포넌트를 조작하는데 이와 달리 함수형 컴포넌트에선 생명주기 메서드가 따로 존재하지 않기 때문에 리액트 훅을 사용하여 생명주기 메서드와 비슷하게 동작하도록 구현한다. 라이프사이클을 생성, 업데이트, 제거 총 세 가지 단계로 나눌 수 있고 각 단계마다 메서드가 존재한다. 총 9가지 메서드가 있으며 각 단계별 메서드에 대해 간단히 알아보려 한다. 참고로 클래스형 컴포넌트에서만 사용 가능하다. 아래 그림을 참고하자. 🗨️마운..
JSON Server 사용하여 React 프로젝트 만들기 (with Heroku 배포)
제가 이번에 진행했던 프로젝트에선 json server를 셋팅하고 비동기 데이터 처리를 위한 커스텀 훅을 구현하는 역할을 맡았습니다. 프로젝트를 진행하며 json server을 활용했던 과정을 공유하고자 합니다. 0. JSON Server란? JSON Server은 mock data(json 파일 형태)를 가지고 가짜 API 서버를 만들어 실제로 통신할 수 있도록 백엔드 역할을 대신 해주는 것입니다. 해당 서버는 프론트엔드 개발 환경에서 테스트 용도 등으로 사용하는 것으로 실제 프로덕트에서의 서버 역할을 대신해주지는 못합니다. 아래 공식문서를 참고하세요🤠 npm 공식문서 json-server Get a full fake REST API with zero coding in less than 30 secon..