Components

컴포넌트란 입력 받은 값을 가지고 화면에 표시할 React엘리먼트를 반환하는 함수라고 생각하면 쉽다

컴포넌트를 만드는 방법 중에 하나인 함수를 이용하는 법에 대해 알아보자

function Hello(){
    return <div>
        Hello, World
    </div>
}

이렇게 작성한 함수는 Hello 컴포넌트가 된다

위에서 설명한 대로 Hello컴포넌트는 JSX를 반환하고 있음으로 이는 곳 리액트 엘리먼트를 반환하고 있다

다음 코드를 살펴보자

const element = <Hello name={'React'}/>;

리액트는 컴포넌트로 반환되고 있는 엘리먼트를 발견하면 그와 같이 반환되는 자식들을 그 컴포넌트의 내부에 암묵적으로 전달한다

위 코드에서는 Hello를 발견해서 컴포넌트가 작동하려할 때 자식인 {name : 'React'}가 props의 객체로 전달되는 것

그 props객체를 이용하기 위해선 위에서 본 컴포넌트의 인자를 설정해주면 된다

최종 코드는

function Hello(props){
    return <div>
        Hello, {props.name} World
    </div>
}

const element = <Hello name={'React'}/>;

ReactDOM.render(
    element,
    document.getElementById('root')
);

 

---

리액트 튜토리얼에서는 컴포넌트를 작게 쪼개어서 사용할 것을 권장하고 있으며

쪼갠 컴포넌트 끼리 합성해서 사용한다면 재사용률을 높일 수 있다

그리고 컴포넌트는 순수 함수처럼 작동해야하기 때문에 props객체로 받아온 데이터들을 내부에서 수정할 수 없다

*컴포넌트의 이름은 항상 대문자로 시작한다.