[TIL] Function component, JSX

react logo

1. 컴포넌트 만들기

◎ component를 만들 때는 클래스 component와 함수형 component가 있다.

예전에는 클래스 컴포넌트를 사용하였지만 리액트에서 Hooks라는 개념이 등장하고부터 함수형 컴포넌트를 많이 사용하는 추세이다.

그래서 현재 많이 사용하고 있는 함수형 컴포넌트로 만들고 나중에 클래스 컴포넌트를에 대해 알아보겠다.

자, 이제 함수형 컴포넌트로 src 디렉터리에 Hello.js라는 파일을 만들어보자.

 

Hello.js

리액트 컴포넌트를 만들 때는

import React from 'react';

를 통하여 리액트를 불러와 주어야 한다.

그리고 코드의 최하단에는

export defualt Hello;

를 통하여 Hello라는 컴포넌트를 내보겠다는 의미로 코드를 작성하여야 한다. 이렇게 해주면 다른 컴포넌트에서 불러와서 사용할 수 있다.

2. 컴포넌트 불러오기

◎ 위에서 만든 Hello 컴포넌트를 App.js 에서 불러와서 사용해보자.

 

App.js에서 Hello 컴포넌트를 불러올 때는 상단에 다음과 같은 코드를 작성하여야 한다.

import Hello from './Hello';

그리고 return 안에 <Hello />라고 코드를 치면 

 

browser

Hello 컴포넌트의 내용이 화면에 나오게 된다.

컴포넌트는 일종의 UI 조각이라 쉽게 재사용 할 수도 있다.

 

App.js

browser

3. 렌더링은 어디서 일어나는가?

◎ 위의 코드를 보면 App 컴포넌트의 내용들이 잘 나온다. 그렇다면 App.js 는 어디에 렌더링 되길래 화면에 나오는지 알아보자.

우선 index.js를 열어보자.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

여기서 ReactDOM.render의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링 하겠다는 것을 의미한다. id가 root인 DOM을 선택하고 있는데, 이 DOM 이 어디에 있는지 봐보자.

 

public/index.html을 열어보자.

index.html

위의 코드를 보면 index.html에 id가 root인 div가 있다. 결국 리액트 컴포넌트가 렌더링 될 때에는, 렌더링 된 결과물이 위 div 내부에 렌더링 되는 것이다.

개발자 도구

개발자 도구로 확인해보면 root 아래에 컴포넌트가 렌더링 되고 있다.

4. JSX

◎ JSX는 리액트에서 생김새를 정의할 때, 사용하는 문법이다. 얼핏 보며 HTML 같이 생겼지만 실제로는 Javascript이다.

 

위의 코드에서 return <div> 리액트야 반가워 </div>;처럼 XML 형태로 코드를 작성하면 babel 이 JSX를 Javascirpt로 변환을 해주는 것이다.

※ Babal은 자바스크립트의 문법을 확장해주는 도구이다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로써 구형 브라우저 같은 환경에서도 제대로 실행할 수 있게 해주는 역할을 한다.

5. JSX 사용할 때 지켜야 할 기본적인 규칙

◎ React 첫 번째 블로그에 JSX를 사용할 때 지켜야 할 규칙에 대해서 간략하게 적어놨다. 

JSX가 Javascript로 제대로 변환이 되려면 지켜주어야 하는 몇 가지 규칙이 있다.

다음 규칙들을 상세하게 알아보자.

5-1. 꼭 닫혀야 하는 태그

◎ 태그는 꼭 닫혀있어야 한다.

다음과 같은 코드는 오류가 발생하게 된다.

import React from 'react';
import Hello from './Hello';
import './App.css';

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

export default App;

<Hello /> 밑에 <div> 태그가 있지만 열려있기만 하고 닫혀있지가 않다.

태그를 열었으면 꼭, <div></div> 이렇게 닫아 주어야 한다.

html에서는 input 또는 br 태그를 사용할 때 닫지 않고 사용하는데, 리액트에서는 그렇게 하면 안 된다.

태그와 태그 사이에 내용이 들어가지 않을 때에는, Self Closing 태그를 사용해야 한다.

Self Closing 태그는 열리고, 바로 닫히는 태그를 의미한다.

 

App.js

browser

<input />로 작성하여 오류 없이 화면에 잘 나타난다.

5-2. 꼭 감싸져야 하는 태그

◎ 두 가지 이상의 태그는 무조건 하나의 태그로 감싸 져있어야 한다. 다음 코드를 봐보자.

 

App.js

<Hello /> 컴포넌트와 <div>와 같은 위치에 있다. 이런 코드는 오류를 발생하게 된다.

 

error

그 대신에 하나의 태그로 감싸주어야 한다.

보통 단순히 감싸기 위하여 불필요한 div로 감싸는 게 별로 좋지 않은 상황도 있다. 예를 들어서 스타일 관련 설정을 하다가 복잡해지게 되는 상황이 올 수도 있다. 그럴 땐, 리액트의 Fragment라는 것을 사용하면 된다.

Fragment를 사용하여 코드를 감싸 보고 실행해보자.

 

App.js

<></>(Fragment)를 사용하여 코드를 작성하였다. 

화면에는 잘 나타나 지며 개발자 도구를 켜서 확인해보면 Fragment는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

 

개발자 도구

5-3. JSX 안에 자바스크립트 값 사용하기

◎ JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 { }으로 감싸서 보여준다.

다음 코드를 봐보자.

 

App.js

browser

5-4. style과 className

◎ JSX에서 태그에 style과 CSS class를 설정하는 방법은 html에서 설정하는 방법과 다르다.

우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color처럼 - 로 구분되어 있는 이름들은 backgroundColor처럼 camelCase 형태로 네이밍 해주어야 한다.

다음 코드를 봐보자.

 

App.js

browser

이렇게 객체 형태로 만들어야 하며 기본 단위는 px이며 다른 단위 사용 시 문자열로 설정해야 한다.

그리고, CSS class를 설정할 때에는 class= 가 아닌 className=으로 설정을 해주어야 한다.

App.css 파일을 열어서 전체 내용을 지운 뒤 다음과 같이 수정해보자.

 

App.css

그다음, App.js를 다음과 같이 코드를 작성해보자.

 

App.js

browser

class가 아닌 className!!

5-5. 주석

◎ JSX에서 주석은 { }로 감싸서 작성해야 한다.

{/* 주석은 중괄호를 사용하여 감싸야 한다. */}

추가적으로, 열리는 태그 내부에서는 // 로 작성해야 한다.

<Hello
 // 열리는 태그 내부에서는 이렇게 주석을 작성 할 수 있다.
/>

6. 느낀 점

◎ 아직 component와 JSX문법이 익숙하지는 않지만, 앞으로 리액트로 많은걸 해야 하기 때문에 

많이 사용하여 익숙해지자!!

react 너무 재미있다.. 굳굳!

벨로퍼트님 설명이 아주 굳굳!

※ 참조

- '벨로퍼트와 함께 하는 모던 리액트' 강의(컴포넌트, JSX) 정리

- '리액트를 잘 다루는 기술' 책 정리