본문 바로가기

react

[React.js] 컴포넌트 라이프사이클과 주요 메서드 호출 순서 컴포넌트 라이프사이클이란 컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있습니다. 모든 리액트 컴포넌트는 Lifecycle을 갖습니다. Lifecycle은 세 가지 카테고리로 나누어지며, 개괄적인 그림은 다음과 같습니다. Mounting: 컴포넌트가 화면에 나타남 Updating: 컴포넌트가 업데이트됨 Unmounting: 컴포넌트가 화면에서 사라짐 또한 컴포넌트는 Lifecyle마다 메서드를 가지고 있습니다. 이 메서드를 이용해서 특정 시점에 원하는 동작을 하도록 만들 수 있습니다. 메서드에 대해서 더 자세히 알아보겠습니다. Lifecycle 메서드 알아보기 에러 처리 메서드를 제외하면 Lifecycle 메서드는 총 8가지입니다. 자주 사용되는 Lifecycle 주.. 더보기
[React.js] 리액트 프로젝트 초기 세팅하기 리액트 프로젝트를 생성하고 개발에 필요한 초기 세팅 과정을 알아봅니다. 1. Node.js / npm 설치 2. create-react-app을 이용해서 작업 환경 구축 3. 추가 라이브러리 설치 4. 프로젝트 폴더 구조 세팅 5. +@ 프로젝트 루트 설정, ESLint와 Prettier 추가 Node.js / npm 설치하기 Node.js는 자바스크립트 런타임입니다. 이를 이용하면 웹 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있습니다. npm은 node.js와 함께 설치되는 패키지 매니저입니다. 이를 사용하여 패키지 설치 및 관리할 수 있습니다. 노드제이에스 홈페이지에서 다운로드하여 설치할 수 있습니다. brew가 설치된 맥을 이용한다면 다음과 같은 커맨드로 설치할 수도 있습니다. brew i.. 더보기
[React.js] 리액트 시작하기: 리액트란, Virtual DOM, JSX 처음 리액트 학습을 시작하는 입장에서 학습한 내용을 간단히 정리했습니다. React란 React는 페이스북이 만든 Javascript 라이브러리로 UI를 만들기 위해 사용됩니다. 리액트는 다음과 같은 장점을 갖습니다. - 바닐라 자바스크립트보다 더 속도가 빠른 웹 애플리케이션을 만들 수 있다. (Virtual Dom) - 재사용 가능한 UI 단위로 코드 블록을 만들어 효율적으로 화면을 구성할 수 있다. (Component) - 풍부한 생태계를 갖추고 있다. 프론트엔드 프레임워크 3 대장 중 가장 많이 사용되고 있기 때문에 커뮤니티가 활발하다. MVC, MVW 패턴을 사용하는 프레임워크와 리액트의 차이점 리액트의 가장 큰 특징은 보여지는 화면(View)에 특화된 것입니다. 이 점이 MVC(Model-Vie.. 더보기