리액트 기본, 컴포넌트, props

1. JSX

 

리액트 개발 환경에서 태그가 나오면 JSX가 자동으로 객체 형태로 바꿔준다.

 

const element = <h1 className="greeting">Hello</h1>;

 

위는 아래와 동일하다.

 

const element = {

    type: 'h1',

    props: {

        className: 'greeting', // 리액트에서는 class 대신 className을 쓴다.

        children: 'Hello'

    }

}

 

 

 

2. Rendering Elements

 

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

 

리엑트는 기본적으로 특정 엘리먼트에 추가하는 방식으로 사용한다.

 

const element = <h1>Hello</h1>;

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

 

 

 

3. Components and Props

 

리엑트는 편의성과 재사용을 위해서 보통 컴포넌트를 활용한다.

컴포넌트는 자바스크립트에서 new 키워드로 객체를 생성 하기 위해 선언하는 함수와 같다.

 

function Welcome(props) { // 3

    return <h1>Hello, {props.name}</h1>; // socratone

}

 

function App() {

    return (

        <div>

            <Welcome name="socratone" /> // 2

        </div>

    );

}

 

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

 

1처럼 사용자가 만든 형태의 태그를 첫 번째 인자에 넣는 경우

객체를 생성해서 리턴한다.

이를 props라고 부른다.

 

2처럼 리턴 안에서 또 사용자 태그를 쓴다면

마찬가지로 객체를 생성해서 리턴한다. 

 

이때 태그에 속성을 주고 값을 담으면

3에서 props 객체를 인자로 받아 값을 사용할 수 있다.

 

props를 자기 자신이라고 보면 쉽다.

자신인 Welcome의 name 속성을 만들어 'socratone'을 넣은 것과 같다.

const props = { name: 'socratone' };

 

이런 식으로 컴포넌트 안에 컴포넌트를 넣을 수 있다.

 

 

 

참고 :

Introducing JSX

https://reactjs.org/docs/introducing-jsx.html

Rendering Elements

https://reactjs.org/docs/rendering-elements.html

Components and Props

https://reactjs.org/docs/components-and-props.html