[React] Intro - JSX, Component, CRA

선정·2022년 6월 1일
Section 2Today I learned
0

Today I Learned

  • React
    • JSX
    • Component
    • Create React App

React

프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리

React의 3가지 특징

1. 선언형(Declarative)

  • 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 방식 (명시적)
  • 어떻게(how)에 집중하는 명령형 프로그래밍과 대조적으로 무엇(what)에 집중하여 프로그래밍한다.
  • 리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 한다.

2. 컴포넌트 기반(Component-Based)

  • 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
  • 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있고 유지보수 및 유닛 테스트를 하기에 용이하다.

3. 범용성(Learn Once, Write Anywhere)

  • 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다. Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.

  • 프레임워크 - 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합으로 그 생태계에 종속된다.
  • 라이브러리 - 다른 프로그램에서 호출하여 사용할 수 있도록 제공하는 일종의 함수 집합으로 기존 프로젝트에도 유연하게 사용 가능하다.
  • 프레임워크는 전체적인 실행 흐름을 자체적으로 제어하고, 라이브러리는 실행 흐름에 대한 제어 권한을 사용자가 갖는다.

JSX(JavaScript XML)

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 새로운 문법이다(HTML + JavaScript). JSX를 사용하면 JavaScript만으로 마크업 형태의 코드를 작성해 DOM에 배치할 수 있다. 그래서 React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다.

JSX는 브라우저에서 바로 실행할 수 없으므로 브라우저가 이해할 수 있는 JavaScript 코드로 컴파일(변환)하기 위해 Babel(컴파일러)을 필요로 한다. 컴파일 후에는 JavaScript를 브라우저가 읽고 화면에 렌더링 할 수 있다.


JSX 규칙

1. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 하나의 엘리먼트 안에 모든 엘리먼트가 포함돼있어야 한다.

// 잘못된 예시 ❌
<div>
  <h1>Hello</h1>
</div>
<div>
  <h2>World</h2>
</div>

// 옳은 예시 ⭕️
<div>
  <div>
    <h1>Hello</h1>
  </div>
    <div>
    <h2>World</h2>
  </div>
</div>

2. 엘리먼트 클래스 사용 시, className으로 표기한다.

// 잘못된 예시 ❌ : html 클래스 속성 대신 자바스크립트 클래스로 인식
<div class='greeting'>Hello</div>

// 옳은 예시 ⭕️
<div className='greeting'>Hello</div>

3. JSX에서 JavaScript 사용 시, 꼭 중괄호를 이용해야 한다.

function App() {
  const name = 'Josh Perez';
  
  return (
    <div>
      Hello, {name}
    </div>
  );

4. 사용자 정의 컴포넌트는 대문자로 시작해야 한다. (PascalCase)

// 잘못된 예시 ❌ : 소문자로 시작 => HTML 엘리먼트로 인식
function hello() { // 소문자
  return <div>hello</div>;
}

function HelloWorld() {
  return <hello />; // 소문자
}

// 옳은 예시 ⭕️
function Hello { // PascalCase
  return <div>Hello</div>
}

function HelloWorld {
  return <Hello />; // PascalCase
}

5. 조건부 랜더링에는 삼항연산자 사용한다.

<div>
  (1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
</div>

JSX문법에서 if문 자체를 사용할 수는 있지만 값으로 변수에 할당할 수 없는 if문과 달리, 삼항연산자는 변수에 할당이 가능한 JSX 표현식으로 취급되어 컴포넌트 리턴값으로 사용할 수 있다는 차이점이 있다!


6. 여러 개의 HTML 엘리먼트를 표시할 때, map() 메소드를 이용한다.

  • map()을 사용할 때는 반드시 "key" 속성을 넣어야 한다.
const posts = [
    { id: 1, title: 'Hello World', contetn: 'Welcome to learning React!' },
    { id: 2, title: 'Installation', contetn: 'You can install React from npm.' }
];

function Blog() {
    return (
      <div>
        {posts.map((post) => (
          <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </div>
        )}
      </div>
    );
}

map() 활용 방식

const posts = [
    { id: 1, title: 'Hello World', content: 'Welcome to learning React!' },
    { id: 2, title: 'Installation', content: 'You can install React via npm.' },
    { id: 3, title: 'reusable component', content: 'render easy with reusable component.' },
    // ...
    { id: 100, title: 'I just got hired!', content: 'OMG!' },
];


// (1)
function Blog() {
    const content = posts.map((post) =>
        <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
    );

    return <div>{content}</div>
}


// (2)
function Blog() {
    const postToElement = (post) => (
        <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
    );

    const blogs = posts.map(postToElement);

    return <div>{blogs}</div>
}

key 값 주의사항

  • key 속성은 컴포넌트의 최상위 엘리먼트에 작성해야 한다.
  • key 값은 변하지 않고, 예상 가능하며, 유일한 값(e.g. 데이터의 고유한 id 값)을 지정해야 한다.
  • 고유한 id 값이 없을 경우 배열의 인덱스를 이용하기도 하지만, 이는 최후의 수단으로 사용해야 한다.
  • key 값을 Math.random() 등으로 무작위로 생성된 값을 key로 지정하게 되면, 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠질 수 있다.

Component

하나의 기능 구현을 위한 여러 종류의 코드 묶음으로, UI를 구성하는 필수 요소이다. 각각 독립적인 기능을 가지는 컴포넌트를 여러 개 만들고 조합하면 애플리케이션을 만들 수 있다.
모든 리액트 애플리케이션은 최소 한 개 이상의 컴포넌트를 가지고 있고 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 그 밑으로 자식 컴포넌트, 또 그 자식의 자식 컴포넌트 등을 조합하여 트리 형상의 계층적 구조를 이룬다.

컴포넌트 기반 개발의 장점은 애플리케이션의 기존 레이아웃 수정할 때를 예시로 들 수 있다.

  • HTML, CSS, JavaScript를 이용해 개발한 경우
    (1) HTML로 구조를 바꾼다.
    (2) CSS를 수정한다.
    (3) 변경된 구조와 디자인에 맞춰 DOM 조작 로직을 수정한다

  • 리액트를 통해 컴포넌트 기반으로 개발한 경우
    : 변경하려는 UI에 맞춰 기존 컴포넌트의 위치만 수정한다.


Create React App

React SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인으로, 배포용 웹 애플리케이션을 만드는 데 필요한 node.js 패키지들을 묶어주는 모듈 번들러이다.

터미널에서 아래의 명령어를 실행하면 따로 설정하지 않아도 프로젝트에 필요한 도구들을 사용하여 새로운 프로젝트를 시작할 수 있다.

npx create-react-app 프로젝트명
cd 프로젝트명

code . // VScode에서 실행
npm start // 또는 npm run start 또는 react-scripts start
profile
선정
starter
이전 포스트

[JS/Node] 비동기 (3) - fetch API

다음 포스트

[React] React SPA - SPA, React Router

0개의 댓글