3장 컴포넌트

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다.

 

학습 범위: p85 ~ p.117

 

새로 알게된 사실

 

1. 함수 컴포넌트가 클래스형 컴포넌트보다 선언하기가 편하고, 메모리 자원도 덜 사용한다.

 

2. ES6의 화살표 함수는 함수를 파라미터로 전달할 때 유용하다.

 

3. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.

 

4. props는 컴포넌트 속성을 설정할 때 사용하는 요소이다.

 

5. props 값을 따로 지정하지 않았을 때 기본값을 설정하는 것은 defaultProps를 통해 가능하다.

 

6. 컴포넌트 태그 사이의 내용을 보여주는 props는 props.children을 통해서 가능하다.

import React from 'react';
 
const MyComponent = props => {
  return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다. <br />
      children 값은 {props.children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

 

7. props와 state 차이

 

공통점: 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있다.

 

props: 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꿔주어야 한다.

 

state: 컴포넌트 내부에서 바뀔 수 있는 값을 의미. 컴포넌트에서 자체적으로 지닌 값 (컴포넌트 내부에서 값 업데이트)

 

=>한마디로, 해당 컴포넌트 내부에서 수정 가능하냐 아니냐 차이로 가볍게 이해해도 괜찮을것 같다.

 

8. useState가 반환하는 배열의 두번째 원소인 상태를 바꿔주는 함수를 Setter 함수라고 부른다.

 

9. Reactjs Code Snippet 확장프로그램을 설치했다면 rsc를 입력하고 엔터를 누르면 편하게 컴포넌트가 만들어진다.