React - 4 [component 사용 , JSX]

component

- 기본적으로 component는 HTML을 반환하는 함수이다.

- 아래 경우에서 "<App />" 와 같은 형태를 component라고 한다.

- component는 javascript로 HTML 형태를 반환한다. (JSX : javascript와 HTML의 조합)

- React는 모든 부분이 component라고 생각하면 된다.

 

JSX

- html in javascript 

- React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in your application are related to JavaScript or to the more specific domain of React. -MDN

 

위 설명대로 자바스크립트와 HTML이 혼용되어 쓰이는 코드를 JSX라고 한다.

 

 

React에서 js코드를 생성할 때 js 파일안에 JSX가 쓰였다면 반드시

import React from 'react';

를 해야한다.

 

 

\

그렇지 않으면 JS파일안에서 JSX를 이해하지 못한다.

위 코드를 보면 html을 반환하는 potato 컴포넌트가 생성되었다.

하지만 위 함수는 선언만 한 상태이기 때문에

 

export default Potato;를 통해서 함수를 JS의 모듈에 추가 시키는 과정이다.

이과정을 통해서 우리는 Potato 컴포넌트를 사용할수 있다. 

 

실제 컴포넌트를 활용해보자.

 ReactDOM에서 APP 컴포넌트를 사용하는 것과 같이 Potato 컴포넌트를 사용하려고 

한다면 에러가 일어난다.

 

ReactDOM은 하나의 컴포넌트만 랜더링 하기 때문이다. 따라서 Potato 컴포넌트는

APP 컴포넌트 안에서 활용해야한다.

 

// APP.JS
import React from 'react';
import Potato from './Potato';

function App() {
  return (
  <div>
    <h1>Hello Doodream App!!</h1>
    <Potato />
  </div>
  );
}

export default App;

 

// Potato.JS
import React from 'react';

function Potato(){
    return (
        <h3>
            I love potato
        </h3>
    )
}

export default Potato;

같은 디렉토리 안에 있는 ./Potato JS파일을 import 해주고 Potato 컴포넌트를 활용하면된다.

Potato가 반환하는 html을 넣을 곳으로 Potato 컴포넌트를 사용하면

이렇게 반환이 된다. 매우 쩔어....!

 

새롭게 컴포넌트 파일을 만들어도 되지만 작은 컴포넌트들은 굳이 새로 파일을 팔 필요가 없다.

 

그냥 이렇게 함수를 APP.JS 안에 만들고 컴포넌트를 사용하면된다.

 

이제 컴포넌트 안에서 컴포넌트로 혹은 컴포넌트안에 data를 주는 방법을 배워보자

function App() {
  return (
  <div>
    <h1>Hello Doodream App!!</h1>
    <Potato age = "24"/>
  </div>
  );
}

위 코드에서 Potato 라는 컴포넌트에 age 라는 property를 주고 그값을 "24"로 주었다.

JSX에서는 property = value라는 매우 직관적인 방식으로 property를 설정한다.

value의 값은 boolean도 좋고, Number 타입도 좋고, 배열도 좋다.

코드를 보면 각 property 마다 구분을 하지 않고 그냥 띄어쓰기로 구분한다.

 

위 코드에서 APP() 컴포넌트에서 사용된 Potato 컴포넌트에는 여러 속성이 설정되었다.

Potato 컴포넌트가 사용될때 이러한 속성을 모두 function의 매개변수에 다 넣게 된다.

 

console.log(props)를 하면

이렇게 해당 속성들이 Object로 넘겨져서 출력되는 것을 볼수 있다.

그래서  이런식으로 속성을 골라서 출력이 가능하다.

function Potato(props){
  console.log(props.somthing); // === { something }
  return(
    <h3>
      I love Potato
    </h3>
  )
}

props.something 이라는 표현과 { something } 이라는 표현은 정확하게 같다.