벨로퍼트와 함께하는 모던 리액트

이 포스트는 벨로퍼트와 함께하는 모던 리액트 를 보고 작성하는 강의 정리 포스트입니다.

컴포넌트

리액트 컴포넌트를 만들어 보자

Hello.jsx를 만들고

// 아래 import로 리액트를 불러온다.
import React from 'react';

// 아래 코드로 함수형 방식으로 컴포넌트를 작성 한다.
function Hello() {
    return (
        <div>
            안녕하세요
        </div>
    );
}

// 함수형 컴포넌트를 export 하여 다른 jsx에서 사용가능케 한다.
export default Hello;

props란

properties의 줄임말로 어떤 값을 컴포넌트에게 전달 해줘야 할 때 props를 사용한다.

props의 사용법

Hello 컴포넌트에게 name이라는 값을 전달 해 주고 싶다면

//App.jsx
function App() {
    return (
        <div>
            <Hello name="1234"/>
        </div>
    );
}

//Hello.jsx
function Hello(props) {
    return (
        <div>
            {props.name}
        </div>
    );
}

Hello.defaultProps = {
    name: '이름없음',
}

export default Hello;

위처럼 함수 Hello 객체엔 defaultProps 속성이 있고 export 하기전 default 속성(props)값을 지정해 줄수 있따.

또한 비구조화 할당 방식을 이용하여 props 값을 전달 가능하다.

비구조화 할당 방식

function Hello({name}) {
    return (
        <div>
            {name}
        </div>
    );
}

이렇게 {name} 이렇게 props를 받으면 Object로 받는게 아닌 Object에 해당하는 값이 받게 된다.

(해당 방식도 defaultProps 속성에 default값을 넣으면 똑같이 동작한다!)

Style 속성

엘리먼트의 style속성은 react에서 Object형식으로 매핑되어야 한다.

style={ 오브젝트 객체 }

자바스크립트의 Object를 사용하기 위해 {} 를 사용하고 안에 오브젝트 객체를 넣어주면 된다.

아래 코드같이(만약 color라는 props를 받았다면 )

//App.jsx
function App() {
    return (
        <div>
            <Hello color={"red"}/>
            <Hello name="12345" color="pink"/>
            <Hello name="12345" />
        </div>
    );
}

//Hello.jsx
function Hello({name,color}) {
    var style = {
        color: color
    }

    return (
        <div style={style}>
            {name}
        </div>
    );
}

물론 비구조화 할당 방식도 가능하다