[React] JSX와 Component에 대한 이해 (+ Fragments)

JSX란?

javascript안의 HTML이라고 볼 수 있다.
javascript와 HTML사이의 이 조합을 jsx라고 부른다. (react에서만 있는 개념)
JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게

도와주는 자바스크립트 문법이라고 볼 수 있다.

 

Component

function App() {
  return (
    <div>
      <h1>hi hello</h1>
    </div>
  );
}

component는 위와 같이 React 엘리먼트를 반환하는 함수이다.

javascript 함수이기 때문에 말 그대로 함수 컴포넌트라고 한다.

react는 여러가지의 component를 만들 수 있다.

 

*component명은 대문자로 생성해 주는 것을 원칙으로 한다.

 

 

컴포넌트 생성 및 다중 컴포넌트 렌더링

component를 만들 때는 한 파일 안에서 관리 할 수도 있겠지만

여러 component가 있을 시에 파일을 나누어 관리하는 것이 좋다.

 

항상 import React from "react";를 상단에 적어주어야 한다고 했지만.
찾아보니 cra4.0부터는 jsx를 사용할 때 상단에 import를 적어주지 않아도 된다.

하지만 해당 파일을 import할 수 있게 export default [함수명]; 해야 한다.

 

import [component name] from '[path]';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <[component name] />
  </React.StrictMode>,
  document.getElementById('root')
);

index.js에 새로운 component를 import해주고
위와 같이 입력하면 2개의 component를 입력 가능하다.

이전 버전에서는 한번에 하나의 component만 렌더링 할 수 있었으나 변경된 모양이다.

 

import [component name] from '[path]';

function App() {
  return (
    <div>
      <h1>hi hello</h1>
      <[component name] />
    </div>
  );
}

App.js component안에
새로 만든 component를 import해주고 안에 넣어서 사용할 수도 있다.

* 주의할 점은 return () 소괄호 안에 담아주어야 하며

한 개의 div로 감싸서 그 안에 엘리먼트들을 담아야 한다는 점.

 

 

- Fragments

React에서는 component가 여러개의 엘리먼트들을 반환할 때 div로 감싸주어야 한다.

하지만 div로 감싸고 싶지 않다면 <></>로 감싸주어도 된다. (Fragments 문법)

<> </>는 <React.Fragment> </React.Fragment>의 축약형이라고 볼 수 있다.

 

function App() {
  return (
    <>
      <h1>hi hello</h1>
      <[component name] />
    </>
  );
}

 

하지만 fragments에 key가 있다면 <React.Fragment> </React.Fragment> 로 명시해 주어야 한다.

 

function App() {
  return (
    <React.Fragment>
      <h1>hi hello</h1>
      <[component name] />
    </React.Fragment>
  );
}

 

 

- Component 안에서 변수명, 함수 불러오기

function App() {
  let views = 10;
  function totalViews(){
    return views += 100;
  }
  return (
    <div className="App">
      <div>
        <div>{views}</div>
        <div>{totalViews()}</div>
      </div>
    </div>
  );
}

위와같이 변수명과 함수로 return받은 값을 중괄호{}와 함께 선언해주면 사용 가능하다.

 

 

 

- Inline style 속성 넣기

<h2 style={ { color: 'yello', fontSize : '20px' } }> Title</h2>

중괄호 안에 object 자료형으로 만든 스타일 적용.

camelCase로 속성명을 적어야 한다.

하지만 웬만하면 css에 적어주는 것으로 하자.

 

 

**요약

 

** component명은 대문자로 생성해 주는 것을 원칙으로 한다.
** component 파일을 나누어 관리 시 하단에 export를 해주어야 다른 파일에서 import를 해서 사용할 수 있다.
** return () 소괄호 안에 담아주어야 하며 한 개의 div로 감싸서 그 안에 엘리먼트들을 담아준다.
** div로 감싸고 싶지 않다면 <> </>로 감싸주어도 된다. (Fragments 문법)
** 만약 fragments에 key가 있다면 <React.Fragment> </React.Fragment> 로 명시해 줘야 한다.