React

아래 명령어를 터미널에 입력하면 리액트 프로젝트를 시작할 수 있다.npx 명령어는 npm 패키지를 1회성으로 내려 받아 실행할 때 사용하는 명령어이다.최신버전으로 다운로드 받아야 개발과정에서 발생하는 에러가 적다고 한다.단, 리액트 프로젝트의 디렉토리명은 react를

React에서 페이지를 구성하는 최소단위이다. Component의 이름은 대문자로 시작한다.함수형 컴포넌트와 클래스 컴포넌트로 나누어진다.먼저 함수형 컴포넌트를 선언해주고, ReactDOM.render()를 이용해 렌더링을 해주면 된다. 매개변수로 함수형 컴포넌트를 &

생명주기(Life cycle)는 클래스 컴포넌트에 적용된다. 생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 말한다. 파이썬의 클래스 객체로 예를 들면, 클래스가 생성되면 생성자가 호출되고 소멸되면 소멸자가 호출된다. 간단하지만 이러한 요소의 시작

이벤트란 사용자의 행동에 반응하는 기능을 정의하는 것을 의미한다. 이벤트의 종류는 다음과 같으며, 이 외의 다양한 이벤트가 존재한다.Keyboard EventsFocus EventsMouse EventsTouch EventsUI EventsReact에서 이벤트를 처리할

Hook은 기존 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 즉, 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 것이 바로 Hook이다.컴포

CSS importCSS moduleCSS-in-jsCSS 파일을 Import해서 사용하는 방식으로 필요한 모든 CSS 스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리가 가능하다.컴포넌트가 많지 않을 경우, 하나의 CSS 파일에 코드를 관리할 수 있음C

<BrowerRouter> 로 감싸서 Router Context를 만들어줘야 react router dom 을 활용할 수 있다. <Route> 안에 path를 지정하고 element에 렌더링할 컴포넌트를 넣으면 된다. <Routes> 는 Route로 생

이번 프로젝트에서 상태관리는 Redux를 이용했다. 내가 맡은 부분 중 전역 상태관리가 필요한 것은 아래 두 가지였다.모달로그인 유저 정보 저장모달은 모든 페이지에서 사용 가능하도록 modalReducer를 만들고 리덕스 스토어에 저장하여 상태관리를 했다. 문제는 로그