리액트

[React] 컴포넌트의 생명주기(Lifecycle)

생명주기란? 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(Lifecycle)라고 한다. 컴포넌트는 생명주기마다 함수를 가지고 있고, 이 함수들을 이용하면 주기의 특정 시점에 원하는 동작을 하도록 만들 수 있다. 컴포넌트의 생명주기 컴포넌트의 생명주기 함수는 총 8종이 있다. 생명주기 함수는 리액트에서 자동으로 호출하며 개발자가 마음대로 호출할 수 없다. 생명주기를 그림으로 나타내면 다음과 같다. 컴포넌트는 생성부터 소멸까지 컴포넌트 생성 → 생성 완료 → 갱신 완료 → 소멸 완료의 4가지 단계를 거친다. 과정은 컴포넌트 생성 → 생성 완료(생성 과정), 생성 완료 → 갱신 완료(갱신 과정), 갱신 완료 → 소멸 완료(소멸 과정)의 3가지 과정을 거친다. 먼저 생명주기 함수가 무엇이 있는지 알..

[React] 다양한 자료형 프로퍼티 사용하기

시작 리액트에서 프로퍼티에 int형이나 boolean형의 값을 전달할 때는 큰따옴표를 사용할 수 없다. 그냥 큰따옴표에 값을 전달하면 문자형으로 인식이 되어 버린다. 때문에 자료형을 지정하여 프로퍼티를 전달할 수 있는 방법을 소개한다. import PropTypes from 'prop-types'; 먼저 해당 라이브러리를 import 해야한다. 해당 글에서는 ChildComponent라는 임의의 컴포넌트를 만들어 사용했다. 객체 구조 분해 할당식 사용 import React, { Component } from 'react'; import PropTypes from 'prop-types'; class ChildComponent extends Component { render() { const { numVa..

[React] 프로퍼티(props) 기본

개요 프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. JS의 DOM트리 방식으로도 값을 전달할 수 있다. 프로퍼티값은 수정할 수 없다. 코드를 보면서 사용 방법을 알아보도록 하겠다. 예제 코드 우선 임의의 컴포넌트 하나를 생성한다. 본 글에서는 MyComponent라는 임의의 컴포넌트를 생성했다. 아래 코드는 클래스형 컴포넌트의 예시이다. 클래스형 컴포넌트와 함수형 컴포넌트를 모두 한 번씩 생성해 보면서 프로퍼티를 전달받을 것이다. import React, { Component } from 'react'; class MyComponent extends Component { render() { return ( ); } } export default MyComponent; 이렇게 컴포넌..

[React] 리액트 시작하기

준비 먼저 컴퓨터에 Node.js를 설치해야 한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당 페이지에서 다운로드를 받을 수 있다. 위 링크로 들어가면 위와 같은 화면이 나올텐데 이 글을 작성한 날짜 기준으로 안정적, 신뢰도 높은 버전이 18.12.1이므로 18.12.1을 설치하는 것을 권장한다. 만약 프로젝트마다 여러 버전의 Node.js를 사용해야 한다면 NVM(Node Version Manager)를 설치하면 된다. https://github.com/coreybutler/nvm-windows/releases Releases · cor..