React를 다루는 기술 03 - React 코드 이해하기

React 코드 이해하기

import React from 'react';

React Component를 작성할 때 필수로 작성해야하는 코드로 React를 불러와서 사용할 수 있게 해주는 코드이다.
해당 코드를 풀면 Node.js를 이용해 React 프로젝트를 생성하면 node_modules라는 폴더에 react 모듈이 설치되는데 이것을 import해서 사용한다는 의미이다.
그런데 본래 브라우저에서는 본래 import 혹은 require를 사용할 수 없다.
기에 import는 Node.js가 지원하는 기능이다.
때문에 이러한 기능들을 브라우저에서 사용하기 위해 번들러를 통해 파일들을 하나의 파일로 뭉쳐주는 작업이 필요하며 React에서는 주로 WebPack을 사용해 Node.js가 지원해주는 import 기능을 번들하여 사용한다.

import logo from './logo.svg';
import './App.css';

위와 같이 이미지 파일이나 css도 import하여 사용가능하며 이것은 WebPack의 Loader가 지원하는 기능이다.
Loader에는 CSS-loader, file-loader 등 기능에 따라 다양한 loader가 있으며 이 중 Babel-loader는 자바스크립트 파일들을 모아서 ES5문법으로 바꿔주는데 이는 ES6 문법을 지원하지 않는 구 브라우저들에서도 동작하게 하기 위함이다.

function App() {
  return (
    <div>
      Learn React
    </div>
  )
}

위의 코드는 App이라는 이름의 Component를 생성하며 HTML코드를 반환하며 이러한 코드를 JSX라고 부른다. 이 JSX에는 몇 가지 규칙이 있는데 이하와 같다.

1. 감싸인 요소
   JSX는 반드시 하나의 요소로 감싸야한다.
   이는 DOM에서 Component의 변화를 감지할 때 효율적으로 진행하기 위함으로 최상단에 아무 요소도 쓰고 싶지 않을때는 v16부터 추가된 Fragment를 사용하여 <fragment></fragment>로 최상단을 감싸면 된다.
   Fragment는 <></>라는 형태로 간편화가 가능하다.

2. 자바스크립트 표현 JSX 내에서 {}괄호를 쓰면 안에서 자바스크립트가 가능하다.

3. if 대신 조건부 연산자 {} 안에서 if는 사용 할 수 없기 때문에 조건부 여산자인 삼항연산자를 써야한다.

4. AND연산자를 이용한 조건부 렌더링 JSX는 {}에 null을 넣으면 아무것도 렌더링하지 않는다.
   이를 이용해 삼항연산자에서 결과가 false일 경우 null을 반환하게 해서 true일 때만 결과가 표시되는 조건부 연산이 가능한데 이는 &&연산자로도 가능하다.
   이는 false도 null과 동일하게 아무것도 렌더링하지 않기 때문이다.

   const example = () => {
     return (
    {
      i < 10 && <div>true</div>
    }
     )
   }
   

5. undefined를 렌더링하지 않기 JSX 내에서는 괜찮지만 javascript를 통해 undefined를 렌더링하면 에러가 발생하게 된다.

6. 인라인 스타일링 DOM 요소에 직접 스타일을 적용할 때는 style={} 구조로 {} 안에 스타일을 입력하면되며 이 때 font-size 등의 - 문자가 포함된 이름은 fontSize 등의 카멜케이스로 입력해야한다.
   style 목록을 변수에 저장해서 넣어도 되고 직접 넣어도 된다.
   ```jsx const example = () => { const styles = { color: #fff }

return <div style={styles}>test</div> } ```

1. class 대신 className DOM에 class를 지정할 때 className으로 써야한다.
   본래 이 부분을 잘못 작성하여 class로 작성하면 에러를 발생시켰지만 v16 이상부터 자동으로 변환해주는 대신 콘솔에서 경고를 한다.

2. 태그는 꼭 닫아야한다 HTML과 다르게 React에서는 div, input, button 등등 JSX 내에서 사용되는 모든 태그는 꼭 닫아야하며 그렇지 않으면 에러가 발생한다.

3. 주석 주석은 {/* */}과 같은 형태로 쓴다.

출처자료

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=209354690 (리액트를 다루는 기술(개정판))