React 공식문서 보기 - 3 (Component, props)

1. Component

컴포넌트는 함수 컴포넌트와 클래스 컴포넌트로 나뉜다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

위와 같이 생긴 모양이 함수 컴포넌트다.

 

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

이 모양은 클래스 컴포넌트다.

 

상태가 있으면 클래스 컴포넌트를 쓰고

상태가 없으면 함수형 컴포넌트를 쓴다.

 

이와 관련된 내용은 state(상태)부분을 볼 때 자세히 보자!

 

위에서 만든 Welcome (클래스 컴포넌트) 는 아직 엘리먼트는 아니다. 그저 리액트의 클래스일 뿐이다.

이 때, 전 게시물에서 배운 JSX를 통해서 엘리먼트로 반환할 수 있다.

 

root.render(<Welcome name="jootang2" />)

 

이렇게 하면은 아래와 같은 일이 일어난다.

1. <Welcome name="jootang2" /> 를 엘리먼트로 root.render()를 호출

 

2. React가 {name: "jootang2"}를 props로 해서 Welcome 컴포넌트를 호출한다.

 

3. Welcome 컴포넌트는 <h1>Hello, jootang2</h1> 엘리먼트를 반환한다.

 

4.React DOM <h1>Hello, jootang2 </h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트 한다.

 

컴포넌트를 역할에 따라 작은 컴포넌트로 나눠야 한다.

컴포넌트를 나누는 기준 중의 하나는 "단일 책임 원칙" 이다.

컴포넌트는 하나의 역할만 가져야 한다.

 

컴포넌트와 props는 직접 많이 만들어보면서 연습해봐야 한다.

 

다음 게시물에서는 State와 생명주기에 대해서 보자!

 

Ref: 

https://ko.legacy.reactjs.org/docs/components-and-props.html

https://jeonghwan-kim.github.io/series/2021/04/15/lecture-react-component.html#%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0