1. 컴포넌트를 선언하는 방식
- 함수 컴포넌트
- 클래스형 컴포넌트
1.0.1. 클래스형 컴포넌트 특징
- render 함수가 있어야 하고, 그 안에서 보여주어야 할 JSX를 반환해야 함
- tate 기능 및 라이프 사이클 기능을 사용할 수 있음
- 임의 메서드를 정의할 수 있음
1.0.2. 함수 컴포넌트 장점
- 클래스형 컴포넌트보다 선언하기 편함
- 메모리 자원도 덜 사용
- 프로젝트를 완성하여 빌드한 후 배포할 때, 결과물의 파일 크기가 더 작음
1.0.3. 함수 컴포넌트 단점
- state와 라이프사이클 API 사용 불가능 -> Hooks 기능이 도입되면서 해결
2. Props
Props : properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소
props 값 : 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있음
2.0.1. 컴포넌트를 사용할 때 props 값 지정하기
컴포넌트를 사용하는 부모 컴포넌트에서 props값을 지정할 수 있다.
App.js 에서 사용하는 NewComponent 에 props 값을 지정해보자.
<code />
//App.js
import React from 'react';
import NewComponent from './NewComponent';
const App = () => {
return (
<div>
<NewComponent name="Joo" />
</div>
);
};
export default App;
이렇게 부모 컴포넌트에서 NewComponent에 지정한 name이라는 속성은 NewComponent에서 props를 파라미터로 받아서 사용할 수 있다. (JSX 내부에서 props 렌더링)
<code />
//NewComponent.js
import React from 'react';
const NewComponent = props => {
return <div>Hello, React Component! I'm {props.name}</div>;
};
export default NewComponent;
2.0.2. props 기본값 설정 : defaultProps
만약, 해당 컴포넌트를 사용하는 부모 컴포넌트에서 props 값을 지정하지 않았을 경우에 defaultProps으로 기본 값을 설정할 수 있음.
<code />
NewComponent.defaultProps = {
name: 'default',
};
2.0.3.
2.0.4. 태그 사이의 내용을 보여주는 children
children : props는 컴포넌트 태그 사이의 내용을 보여줌
<code />
//App.js
import React from 'react';
import NewComponent from './NewComponent';
const App = () => {
return <NewComponent> React </NewComponent>;
};
export default App;
위 코드에서 NewComponent 태그 사이에 작성한 React 라는 문자열을 NewComponent 내부에서 보여주려면 props.children 를 사용하면 된다.
<code />
//NewComponent.js
import React from 'react';
const NewComponent = props => {
return (
<div>
Hello, React Component! My name is {props.name}
<br/>
Children is {props.children}
</div>
);
};
NewComponent.defaultProps = {
name: 'default',
};
export default NewComponent;
함수의 파라미터 부분에서 바로 비구조화 할당 문법을 사용할 수도 있다.
<code />
//NewComponent.js
import React from 'react';
const NewComponent = ({ name, children }) => {
return (
<div>
Hello, React Component! My name is {name}
<br />
Children is {children}
</div>
);
};
NewComponent.defaultProps = {
name: 'default',
};
export default NewComponent;
2.0.5.
2.0.6. propTypes 를 통한 props 검증
컴포넌트의 필수 props 지정 또는 props 타입 지정을 위해 propTypes 를 사용
<code />
import React from 'react';
import PropTypes from 'prop-types';
const NewComponent = ({ name, children }) => {
return (
<div>
Hello, React Component! My name is {name}
<br />
Children is {children}
</div>
);
};
NewComponent.defaultProps = {
name: 'default name',
};
NewComponent.propTypes = {
name: PropTypes.string
};
export default NewComponent;
다음의 정의는 name 속성이 반드시 문자열 형태로 전달되어야한다는 것을 의미
3.
4. state
state : 컴포넌트 내부에서 바뀔 수 있는 값.
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이고, 컴포넌트 자신은 props를 읽기전용으로 사용할 수 있음.
- 클래스형 컴포넌트가 가지고 있는 state
- 함수형 컴포넌트에서 useState 함수를 통해 사용하는 state
4.0.1. 함수형 컴포넌트에서 useState 사용하기
리액트 16.8이후로는 useState 함수로 함수형 컴포넌트에서도 state 를 사용할 수 있음. 이 과정에서 Hooks라는 것을 사용함.
<code />
//Say.js
import React, { useState } from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히가세요!');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1>{message}</h1>
</div>
);
};
export default Say;
코드 첫 줄을 보면 useState 를 import 한다. 그리고 useState 함수를 사용하는데, 함수의 인자에는 상태의 초깃값을 넣어줄 수 있다. 클래스형 컴포넌트에서의 state 초깃값은 객체 형태로 넣어주어야 하지만, useState 에서 값의 형태는 자유이다.
함수를 호출하면 배열이 반환되는데, 배열의 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어 주는 세터(Setter) 함수이다. 이를 비구조화 할당으로 message , setMessage 에 할당해 주고 있다.
onClickEnter 함수는 '안녕하세요!' 라는 메시지로 state 를 세팅하는 함수이고, onClickLeave 함수는 '안녕히가세요!' 라는 메시지로 state 를 세팅하는 함수이다.
useState : 한 컴포넌트에서 여러 번 사용할 수 있음. 색을 관리하는 color 를 state 에 추가해보자.
<code />
//Say.js
import React, { useState } from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히가세요!');
const [color, setColor] = useState('black');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1>{message}</h1>
<button style={{ color: 'red' }} onClick={() => setColor('red')}>
Red
</button>
<button style={{ color: 'green' }} onClick={() => setColor('green')}>
Green
</button>
<button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
Blue
</button>
</div>
);
};
export default Say;
4.1. 정리
props 와 state 모두 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있지만, props 는 부모 컴포넌트가 설정하고, state 는 컴포넌트 내부에서 값을 업데이트한다.
props 를 사용한다고 값이 무조건 고정적이지 않은데, 부모 컴포넌트의 state 를 자식 컴포넌트의 props 로 전달하고, 자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 컴포넌트의 메소드를 호출한다면, props 도 유동적으로 사용할 수 있다.
이 글은 김민준 님의 리액트를 다루는 기술을 읽고 정리한 내용입니다.
