[11.5] React 공부

@kimyoungjo·2019-11-05 17:17

기초 폼

    React.DOM.render {
        <h1>Hello, World!</h1>
        document.getElementById('root')
    }

render는 react의 정수이다. 위에 코드를 살펴보면 H1태그를 작성하였고 root이라는 ID를 가진 element를 불러왔다. react는 h1태그와 같은 html을 rootID를 가진 element에 render해준다. 따라서 화면엔 Hello World가 출력된다. 그리고 이러한 문법을 JSX라고 한다.

JSX

    const element = <h1>Hello World!</h1>

JSX는 위 코드와 같이 변수에도 html 코드가 저장이된다.

    function formatName(user){
        return user.firstName + ' ' + user.lastName;
    }

    const user = {
        firstName : 'Young Jo'
        lastName : 'Kim'
    }

    const element = (
        <h1>
        Hello, {formatName(user)}!
        </h1>
    )

    ReactDOM.render {
        element,
        document.getElementByID('root')
    }

위 코드와 같이 사용 할 수도 있다. user라는 객체와 그 객체를 매개변수로 받는 formatName이라는 객체의 firstName, lastName 요소를 출력해주는 함수, 그리고 마크업 표현인 element를 이용하여 root에(id는 바뀔 수 있음.) element 변수를 render하는 것 이다.

JSX도 표현식이기 때문에 다음과 같은 활용이 가능하다

변수에 할당하기
if, for 내부에서의 사용
function에서의 인자로 받기
function에서의 return값으로 사용

JSX 속성 표기

    const element = <div tabIndex="0"></div>

문자열 리터럴을 표현하기 위한 따옴표의 사용

    const element = <img src={user.imgUrl}></img>

javascript 표현을 속성안에 넣기 위해 {}를 사용.

JSX는 javascript 보단 HTML에 가깝기 때문에 camelCase 사용 원칙.

    const element = (
        <div>
            <h1>
                hello World!
            </h1>
        </div>
    )

앞서 말했듯 HTML에 더 가까운 언어이기 때문에 같은 방식으로 자식을 표현한다.

DOM을 건설을 위한 React Elements

    const element = {
        type : 'h1',
        props : {
            className : 'greeting'
            children : 'Hello World'
        }
    };

Babel의 개념을 사용하여 만든 객체의 기본폼.

Element

element는 react에서 가장 작은 단위이다.

이 element가 react에서 가장 중요한 개념인 component를 구성하게됩니다.

DOM에 element rendering 하기

    <div id = "root"></div>

root라는 id를 가진 div가 있다고 가정했을시, 이것을 "root"DOM노드라고 한다. 이것들은 모두 react DOM에 의해 관리된다.

react로 만들어진 코드들은 대부분 저 DOM노드가 하나이다.(한 가지의 div를 사용한다는 뜻)

react element를 render하기 위해 두 가지를 ReactDOM.render()에 넘겨야 한다.

선언한 element 변수명
DOM노드 ('root' id를 가진 div)

    ReactDOM.render {
        element,
        document.getElementByID('root')
    }

이렇게 말이다.

element의 업데이트

react element는 불변적이다.
영화에서의 프레임 하나라고 생각하면 편하다.
따라서 업데이트 방법은 새로운 element를 만들고 그 element를 ReactDOM.render()에 넘기는 방법이다.

    function tick(){
        const element = (
            <div>
                <h1>It is {new Date().toLocaleTimeString()}</h1>
            </div>
        );
        ReactDOM.render(element, document.getElementByID('root'));
    }

    setInterval(tick, 1000);

위 코드는 시간을 표시해주는 tick이라는 메소드를 setInterval로 1초마다 호출해주는 코드이다.

react에서 ReactDOM.render는 대체로 단 한번만 쓰인다. 그렇기 때문에 다양한 element를 잘 조합한 component들의 유기적인 조합을 잘 생각해내서 어떻게하면 효율적으로 rendering을 할 지 고민해야한다.

Component

react의 컴포넌트는 ui를 독립적이고 재사용 가능하게 해준다.

개념적으로는 javascript의 함수이며 임의의 props를 인풋(매개변수 처럼)을 받아서 화면에 비춘다.

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

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

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

기본적으로 위의 두 코드는 같고 차이는 vanilla와 es6라는 점이다. 보통은 es6를 많이 사용하고 필자도 그럴 예정이다.

    const element <Welcome name = "Kim"/>;

엘레먼트는 위 코드와 같이 컴포넌트를 표현할 수도 있다.

Component의 추상화

컴포넌트는 출력시 다른컴포넌트를 참조할 수 있다.

    function Number (props) {
        return <h1> {props.name} </h1>
    }

    function Output () {
        return(
            <div>
                <Number name = "1" />
                <Number name = "2" />
                <Number name = "3" />
            </div>
        )
    }

    ReactDOM.render (
        <App />,
        document.getElementById('root');
    )

위 코드와 같이 Output이라는 컴포넌트의 출력에서 number을 참조할 수 있고 이를 컴포넌트의 추상화라고 한다.

이 글이 도움이 되었나요?

신고하기