React

리액트란? 📖사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 재사용성과 생산성이 높은 라이브러리인 리액트를 이용하기 위한 기초를 알아보자.

React에서 props와 함께 가장 중요한 개념이 되는 state에 대해서 알아보자. 컴포넌트 내부에 정의되어 일반적인 JavaScript의 객체를 담을 수 있는 변수이자 JSX에 변수로 사용되는 객체이다.

동적이고 유연한 리액트 컴포넌트 사용을 위하여 필수적인 props에 대한 기본적인 개념을 알아보고, 어떻게 사용되며 어떤 규칙들을 준수해야하는지 알아보자.

useEffect는 컴포넌트가 렌더링 될 때 특정 작업(side effects)을 실행할 수 있는 Hook 중 하나이다. 특정 작업(side effects)은 컴포넌트가 렌더링 된 이후 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다.

CSS 프레임워크 중 하나인 TailwindCSS를 React App에 설치하여 사용해보자.

코드의 가독성 및 유지보수성 향상을 위한 Tailwind와 Styled components를 이용해보자.

React App에서 twin.macro 사용을 해보자.

StyledComponents를 사용해서 전역적으로 스타일을 적용하는 방법에 대해서 알아보자.

React 상태 관리의 효율성을 증가시키기 위해 사용하는 Recoil에 대해서 알아보자.

../../의 지옥에서 헤어나오기 위해서 모듈의 Import 경로를 조금 더 간소화 시키는 방법을 알아보자.

기본적으로 컴포넌트 계층 구조를 뛰어넘어 애플리케이션 전역에서 메모리 내의 상태를 보유하고 있는 Recoil의 상태를 초기화하기 위해서는 어떻게해야 하는지 알아보자.

비동기 통신 간 사용되는 Axios를 매요청마다 설정할 필요없이 한번의 설정을 통해 재사용 할 수 있는 방법에 대해서 알아보자.

Recoil을 이용해 비동기 데이터를 호출하는 방법과 UI 렌더링 시 고려해야 할 부분을 알아보자.

typescript + react 환경에서 styled-components와 tailwindcss를 통합하여 사용할 수 있는 twin.macro에 대해서 알아보자.

헷갈리는 개념 및 사용법에 대한 부분을 정리하여 React 코드 작성 시 참고하기 위해 정리한 자료입니다. 필요하신 분들은 간단하게 참고해보세요!