[TIL] React <2> - Component

Component 컴포넌트!!

아마 리액트를 배우면서 가장 많이 듣게 되는 단어가 Component 컴포넌트일 것이다 . 😑
컴포넌트는 리액트의 기본중 기본이라고 할 수 있다.

프론트엔드 개발에서 말하는 컴포넌트란 재사용이 가능한 UI단위이다. 만약 로그인, 회원가입 페이지를 만든다고 할 때, 리액트없이 html로만 만든다고 하면 input 태그를 반복해서 써야하고 디자인을 위해 같은 내용의 css도 각각 다른 css파일에 작성해야 했을 것이다.

또 '내 정보수정' 페이지를 추가해서 password input이 필요하다면 다시 똑같은 html과 css를 작성해야 한다. 이처럼 동일한 코드가 반복되는 부분을 하나의 컴포넌트로 만들어 같은 디자인의 input이 필요한 곳마다 재 사용이 가능하다! 일단 잘 모르겠지만 그래도 따봉👍

컴포넌트는 독립적이며 재사용 가능한 코드로 관리가 가능하다. 하나의 컴포넌트에 html, css, js를 모두 합쳐서 만들 수 있다.

컴포넌트 만들기!!

컴포넌트는 function 함수 , class 클래스로 만들 수 있다.

함수로 Welcome 컴포넌트 구현하기

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

클래스로 Welcome 컴포넌트 구현하기

클래스로 컴포넌트를 만드려면 React.Component를 extend 해서 생성해야 한다. 컴포넌트를 생성할 때 render() 메소드는 반드시 정의해야하고, return도 해주어야 한다!

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

컴포넌트 사용!!

직접 정의한 컴포넌트를 사용할 때, 원하는 attribute를 얼마든지 추가할 수 있다. 그러면 Welcome 컴포넌트(함수)에서 parameter로 해당 attribute를 받아서 사용할 수 있다. 이걸 props라고 한다. props는 property의 준말이다.
.(dot)으로 속성명에 접근이 가능하고, props.속성명으로 속성의 값을 가져올 수 있다 ! 😮

// 1. Welcome 컴포넌트 정의하기
function Welcome(props) {
    return <h1>Hello, { props.name }</h1>;
}
//------------------------------------------------------------------
// 2. App 컴포넌트 정의하기
function App() {
    return (
         <div>
             <Welcome name="Sara" />
             <Welcome name="Kay" />
             <Welcome name="Ashley" />
         </div>
    );
}
// 3. 화면에 React 엘리먼트 그려주기
//------------------------------------------------------------------
ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Welcome 컴포넌트 : Welcome 컴포넌트를 사용한 측(부모)에서 name이라는 attribute를 부여했다. props.name를 통해 name의 값을 가져온다. App 컴포넌트를 보면 div로 감싸져 있고, <Welcome />컴포넌트를 세번 사용했다. name이라는 attribute를 부여했다.

ReactDOM.render 함수는 가장 아래에 작성하고, React 엘리먼트를 그려준다. 무슨 컴포넌트를 렌더할지, 어디에 렌더할지 작성해주면 된다.