Getting Started With React

📚 Taniarascia의 getting-started-with-react

이 글은 Taniarascia의 getting-started-with-react를 한국어로 요약한 정리 글입니다. 공부 목적으로 요약한 주관적인 내용입니다. 😀

리액트란?

• 리액트는 자바스크립트 라이브러리이다.(프레임워크가 아니다.)
• 리액트는 페이스북(현 메타)에서 개발된 오픈소스 프로젝트이다.
• 리엑트는 프론트엔드에서 User Interface(UI)를 제작하기위해 사용된다.
• 리액트는 MVC(Model View Controller) 어플리케이션에서 View를 담당한다.

리액트의 가장 중요한 측면은 당신이 당신만의, 재사용가능한 HTML 요소인 컴포넌트를 빠르고 효과적으로 만들 수 있다는 것이다. 또한 리액트는 state와 props를 사용하여 데이터의 저장과 조작을 유연하게 할 수 있다.

리액트 앱 만드는 방법

npm과 yarn 모두 리액트 어플리케이션 제작을 지원한다.

npx create-react-app [어플리케이션 이름]
yarn create react-app [어플리케이션 이름]

기본적으로 index.html 내부에 id가 root인 div 태그가 리액트의 시작점이 된다. 또한, index.js를 보면

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    );
  }
}

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

// 위는 클래스 컴포넌트 기준이다. 최근에는 함수 컴포넌트를 주로 사용하며 이는 직접 찾아보길!

즉, App 컴포넌트는 root 요소에 렌더링 되며, 우리는 이 App 컴포넌트에 코드를 작성하면 된다.

리액트 DevTools

리액트와 관련된 개발도구를 확장시켜주는 크롬 extension이다. 컴포넌트에 대한 내용과 props, state의 흐름을 보기 쉽게 도와준다.

JSX : JavaScript + XML

리액트 코드에서 HTML과 유사한 코드를 보았을 것이다. 이 부분은 HTML과 유사하긴 하지만, 엄밀히 말하면 JSX로 JavaScript의 확장 문법이라고 생각하면 된다.

아래와 같이 JavaScript에서 HTML을 다룰 수 있게 된다.

const heading = <h1 className="site-heading">Hello, React</h1>;

또한, JSX를 사용하지 않고 아래와 같이 써도 된다.

const heading = React.createElement('h1', { className: 'site-heading' }, 'Hello, React!');

(그러나 위의 코드는 가독성이 떨어져 직관적이지 않다. 사실상 JSX는 리액트를 사용하면서 필수적인 녀석이다.)

JSX의 특징 및 주의사항

JSX는 보이기엔 HTML이지만 실상 JavaScript 코드이다.

• CSS 스타일을 위한 class는 className으로 표기한다. 왜냐하면 JavaScript에는 이미 class라는 예약어가 존재하기 때문이다.
• 속성과 메서드는 CamelCase로 작성한다. ex) onclick => onClick
• Self-closing tags는 반드시 슬래쉬가 뒤에 온다. ex) <img />
• JSX 내에서 자바스크립트 표현은 {}로 할 수 있다.(마치 문자 리터럴내에서 ${} 사용하듯이)

Components(컴포넌트)

리액트는 모두 컴포넌트로 구성되어있다. 컴포넌트 안에 더 작은 컴포넌트들이 들어있고, 그 컴포넌트들 내부도 더더더 작은 컴포넌트들로 구성된다.

• class component

import React, { Component } from 'react';

class ClassComponent extends Component {
  render() {
    return <div>Example</div>;
  }
}

export default ClassComponent;

• simple component(함수 컴포넌트)

const SimpleComponent = () => {
  return <div>Example</div>;
};

export default SimpleComponent;

Props

리액트에서 데이터를 처리하는 방법으로 porps라고 하는 속성과 상태를 사용하여 처리합니다.
(기존 글에서는 class component 예시이지만, 저는 함수 컴포넌트로 작성하였습니다.)

function ParentComponent() {
  const characters = [
    {
      name: 'Charlie',
      job: 'Janitor',
    },
    {
      name: 'Mac',
      job: 'Bouncer',
    },
    {
      name: 'Dee',
      job: 'Aspring actress',
    },
    {
      name: 'Dennis',
      job: 'Bartender',
    },
  ];

  return <ChildComponent characterData={characters} />;
}

function ChildComponent(props) {
  return (
    <>
      {props.characterData.map((v, i) => (
        <div key={i}>
          <p>{v.name}</p>
          <p>{v.job}</p>
        </div>
      ))}
    </>
  );
}

• 위와 같이 배열 함수(map)을 사용하여 데이터에 대한 여러 JSX 요소를 반환할 때는 데이터마다의 고유한 값을 통해 key값을 지정해주어야합니다.(랜더링 시 각 항목을 식별하는데 도움이 되기 때문이며 사실 위와같이 배열의 순서인 i를 주는 것도 효율적인 방법은 아닙니다.)
• 여기서 의문이 생깁니다. props를 통해 상위 컴포넌트의 데이터를 하위 컴포넌트에 전달하는 건 좋았는데, 그렇다면 해당 컴포넌트에서 다루는 데이터는 어떻게 제어할 수 있을까요?

State

state를 사용하면 헤당 컴포넌트에서 데이터를 수정(추가 혹은 삭제 등)을 할 수 있게 됩니다. 함수 컴포넌트는 useState()라는 훅을 사용하여 이러한 상태를 저장하고 조작할 수 있습니다.

회고

아무래도 오래전에 리액트의 큰 개념을 정리한 글이라서 함수 컴포넌트로 설명하는 내용이 없었다. 리액트를 사용하는 사람 입장에서는 정말 당연하고 기본적인 내용이지만, 막연하게 ‘리액트에서 상태가 뭐지??’와 같은 의문이 드는 사람들에게는 좋은 글인 것 같다.