[React] 컴포넌트와 props

컴포넌트

리액트는 컴포넌트 기반의 구조를 가지고 있다.

컴포넌트 기반이라는 것은 작은 컴포넌트가 모여 하나의 컴포넌트를 구성하고,

이러한 컴포넌트들이 모여서 전체 페이지를 구성한다는 뜻이다.

 

리액트 컴포넌트의 역할은 props를 받아서 리액트 엘리먼트를 리턴하는 것이다.

이러한 컴포넌트와 엘리먼트의 관계는 클래스와 인스턴스의 개념과도 유사하다.

 

props

위에서 props를 받아 엘리먼트를 리턴한다고 했는데,

여기서 props는 property의 줄임말 prop에 s를 붙여 복수형으로 만든 것으로,

리액트 컴포넌트의 속성을 말한다.

 

props는 컴포넌트의 모습과 속성을 결정지으며,

컴포넌트에 전달한 다양한 정보를 담고 있는 자바스크립트 객체이다.

 

props의 특징

props의 중요한 특징 중 하나는 읽기 전용이라는 것이다.

따라서 다른 props 값을 가진 엘리먼트를 생성하고 싶다면 새로 생성해야 한다.

따라서 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 엘리먼트를 리턴해야 한다.

 

props의 사용법

props는 자바스크립트 객체이기에,

JSX를 사용하는 경우엔 키-값의 형태로 컴포넌트에 props를 넣을 수 있다.

그리고 props의 값으로 컴포넌트를 넣을 수도 있다.

 

컴포넌트의 종류

컴포넌트에는 크게 클래스 컴포넌트와 함수 컴포넌트로 나눌 수 있다.

함수 컴포넌트는 리액트 엘리먼트를 리턴한다.

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

 

클래스 컴포넌트는 자바스크립트 ES6의 클래스를 활용해서 만들어진 형태의 컴포넌트다.

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

함수 컴포넌트와 달리 React.Component 를 상속받아서 만든다.

 

컴포넌트의 이름

컴포넌트의 이름을 지을 때, 항상 대문자로 시작해야 한다.

왜냐하면 소문자로 시작하는 컴포넌트는 <div>나 <span>같은 DOM 태그로 인식하기 때문이다.

 

컴포넌트 렌더링

컴포넌트라는 틀을 통해 엘리먼트가 생성되고,

이 엘리먼트를 실제로 렌더링을 하려면 root DOM Node의 render()를 호출해야 한다.

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

const element = <Welcome name="gul"/>;
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(element);

{name:"gul"} 이라는 props를 가진 엘리먼트를 생성하고,

이 엘리먼트를 파라미터로 해서 render()가 엘리먼트를 렌더링한다.

 

컴포넌트 합성과 추출

여러개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것을 컴포넌트 합성이라고 한다.

반대로 복잡한 컴포넌트를 쪼개서 여러 개의 컴포너트로 나눈 것은 컴포넌트 추출이라고 한다.