[React] 컴포넌트(Component)와 Props

[React] 컴포넌트(Component)와 Props

 

📌 컴포넌트

앱을 이루는 최소한의 단위를 말한다.

기존의 HTML 문서는 반복적인 부분을 단순히 하드코딩하여 재사용이 불가능했지만, 리액트에서는 컴포넌트를 통해 UI를 `재사용 가능`한 `조각`으로 나눠서 각각 관리할 수 있다.

 

📌 함수 컴포넌트

function Cafe(props){
    return <h1>latte</h1>
}

props를 인자로 받아 react 엘리먼트를 반환한다.

최근에 함수형 컴포넌트를 많이 사용한다.

클래스 컴포넌트보다 간결하다.

 

📌 클래스 컴포넌트

ES6 class 를 사용하여 컴포넌트를 정의할 수도 있다.

class Cafe extends React.Component {
    render(){
        return <h1>latte</h1>
    }
}

함수 컴포넌트보다 더 많은 기능을 사용할 수 있다.

 

📌 컴포넌트 합성

Todos 을 여러 번 렌더링하는 Home 컴포넌트 만들기

function Todos(props){
    return <h1>I will {todo}</h1>
}

function Home() {
    return(
        <div>
            <Todos todo="eat" />
            <Todos todo="sleep" />
            <Todos todo="study" />
        </div>
    )
}

이렇게 최상위의 단일 컴포넌트를 가질 수도 있고, 작은 컴포넌트부터 시작해서 뷰 계층의 상단으로 올라가면서 작업해야할 수도 있다.

 

📌 컴포넌트 추출

function Home(){
    return(
        <div>
            <header>
                <h1>Hello React!</h1>
            </header>
            <main>
                <img src="" alt="" />
                <button>Go Home</button>
            </main>
            <footer>
                <p>welcome to my blog</p>
            </footer>
        </div>
    )
}

상위 컴포넌트 Home 에서 header, main, footer 단위로 하위 컴포넌트를 분리해보자.

컴포넌트를 분리하면 개별 컴포넌트를 관리하기 쉬워진다.

 

• header 추출

function Header(){
    return(
        <header>
            <h1>Hello React!</h1>
        </header>
    )
}

function Home(){
    return(
        <div>
            <Header />
            <main>
                <img src="" alt="" />
                <button>Go Home</button>
            </main>
            <footer>
                <p>welcome to my blog</p>
            </footer>
        </div>
    )
}

• main 추출

function Header(){
    return(
        <header>
            <h1>Hello React!</h1>
        </header>
    )
}

function Main(){
    return(
        <main>
            <img src="" alt="" />
            <button>Go Home</button>
        </main>
    )
}

function Home(){
    return(
        <div>
            <Header />
            <Main />
            <footer>
                <p>welcome to my blog</p>
            </footer>
        </div>
    )
}

• footer 추출

function Header(){
    return(
        <header>
            <h1>Hello React!</h1>
        </header>
    )
}

function Main(){
    return(
        <main>
            <img src="" alt="" />
            <button>Go Home</button>
        </main>
    )
}

function Footer(){
    return(
        <footer>
            <p>welcome to my blog</p>
        </footer>
    )
}

function Home(){
    return(
        <div>
            <Header />
            <Main />
            <Footer />
        </div>
    )
}

 

📌 props

props 는 프로퍼티(propterties)의 줄임말로, 임의의 값을 컴포넌트에 전달할 수 있다.

상위 컴포넌트의 props 를 하위 컴포넌트에 전달하여 하위 컴포넌트에서도 그 값을 사용할 수 있다.

props 는 자바스크립트의 `객체 형태`로 전달된다.

그러나 props 는 `읽기전용`이기 때문에 수정할 수 없다.

 

📌 defaultProps

defaultProps 를 이용해서 props 에 기본값을 설정해줄 수 있다.

기본값 설정 시 값을 지정해주지 않아도 자동으로 props 로 들어간다.

function Home(){
   return(
        <div>{name}은 {age}살이다!</div>
   )
}

Home.defaultProps = {
    name: 'ramin',
    age: '20',
}

// ramin은 20살이다!

 

📌 여러개의 props와 구조 분해(비구조화) 할당

위의 방법처럼 기본값을 설정해줄 수도 있지만, 구조분해할당을 이용해서 props 를 전달해줄 수도 있다.

편한 방법을 선택해서 사용하기!

function Study() {
    return(
        <Button type="button" title="React" name="Start">
    )
}

 

function Button({title, name}){
    return(
        <button name={name}>{title}</button>
    )
}

function Study() {
    return(
        <Button type="button" title="React" name="Start">
    )
}

상위 컴포넌트의 props 를 구조분해할당으로 하위 컴포넌트의 인자로 넣어주면, 컴포넌트 안에서 상위 컴포넌트의 props을 호출하는 props. 을 앞에다 붙이지 않아도 변수명처럼 사용할 수 있다.

 

📌 props.children

function Eat(props){
    return(
        <div>{props.title}</div>
    )
}

function Sleep(props){
    return(
        <button>{props.title}</button>
    )
}

function Home(){
    return(
        <Todos style="border 1px solid pink">
            <Eat title="milk" />
            <Sleep title="right now" />
        </Todos>
    )
}

Eat, Sleep 컴포넌트를 Todos 컴포넌트로 감쌀 경우, Todos 에 설정한 스타일은 화면에 적용되지만 하위 컴포넌트는 렌더링되지 않는다.

이렇게 컴포넌트 사이의 하위 컴포넌트를 화면에 보이기 위해서는 아래와 같이 props.children 을 사용해야한다.

function Todos({children}){
    return(
        <div>{children}</div>
    )
}

 

 

 

 

---

참고 : MDN 문서, 리액트 공식 문서
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.