3.1 클래스형 컴포넌트
- 함수 컴포넌트와 클래스형 컴포넌트의 차이점
- 클래스형 컴포넌트는 state 기능 및 라이프 사이클 기능을 사용할 수 있다.
- 클래스형 컴포넌트는 임의 메서드를 정의할 수 있다.
- 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고 그 안에 보여 주어야 할 JSX를 반환해야 한다.
- 함수 컴포넌트가 클래스형 컴포넌트보다 선언하기 편하다.
- 함수 컴포넌트가 메모리 자원을 덜 사용하고 배포시 결과물의 파일 크기가 더 작다.
- 함수 컴포넌트는 state와 라이프사이클 API 사용이 불가능했지만 Hooks 기능이 도입되면서 해결되었다.
3.3 props
- props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
3.3.1 JSX 내부에서 props 렌더링
아래 코드는 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정해 보자. props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다. props를 렌더링할 때 2장에서 배웠던 것처럼 JSX 내부에서 {}기호로 감싸주면 된다.
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
export default MyComponent;3.3.2 컴포넌트를 사용할 때 props 값 지정하기
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name="React" />;
};
export default App;위 코드를 작성하면 브라우저 화면에
안녕하세요, 제 이름은 React 입니다.
라는 문구가 표시된다.
3.3.3 props 기본값 설정: defaultProps
(...)
return <MyComponent />;
(...)위와 같이 name 값을 지우고 다시 저장하면 현재 name 값을 지정하지 않았기 때문에 브라우저에는
안녕하세요. 제 이름은 입니다.
라는 내용이 보일 것이다.
const MyComponent = props => {
return <div> 안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;위 코드를 추가한 후 저장하면 브라우저에
안녕하세요, 제 이름은 기본 이름 입니다.
라는 문구가 표시될 것이다.
3.3.4 태그 사이의 내용을 보여 주는 children
리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여 주는 props가 있다.
App.js
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent>리액트</MyComponent>;
};
export default App;MyComponent.js
const MyComponent = props => {
return(
<div>
안녕하세요, 제 이름은 {props.name}입니다. <br/>
children 값은 {props.children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;위 코드에서 MyComponenet 태그 사이에 작성한 리액트라는 문자열을 MyComponent 내부에서 보여주려면 props.children 값을 보여 주어야 한다.
브라우저에
안녕하세요, 제 이름은 기본 이름입니다.
children 값은 리액트입니다.
라는 문구가 보일 것이다.
3.3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기
props값을 조회할 때마다 props.name, props.children과 같이 매번 props. 이라는 키워드를 앞에 붙여주면 힘들기 때문에 이러한 작업을 더 편하게 하기 위해 ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법을 알아보자.
const MyComponent = props => {
const{ name, children } = props;
return(
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;위와 같이 작성하면 name 값과 children 값을 더 짧은 코드로 사용할 수 있다.
3.3.6 propTypes를 통한 props 검증
컴포넌트의 필수 props를 지정하거나 prosp의 타입을 지정할 때는 propTypes를 사용한다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷하다. propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 한다.
import PropTypes from 'prop-types';
const MyComponent = ({ name, children }) => {
return (...);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
MyComponent.propTypes = {
name: PropTypes.string
};
export default MyComponent;위와 같이 설정해주면 name 값은 무조건 문자열 형태로 전달해야 된다.
