[TIL] React - Intro

오늘부터 React 스프린트를 시작했다. 트위터 클론을 리액트로 만드는 것이 이번 스프린트의 목표다. 스프린트 결과물이 실제 웹 사이트와 비슷한 모습이 될 수록 만드는 재미가 있다. 리액트로 이미 웹 애플리케이션을 만들어 호스팅 한 경험이 있어서 개념 설명을 따라가는 것은 어렵지 않았다. 오히려 전에는 잘 이해하지 못하고 그냥 복사 붙여넣기로 쓰던 코드들에 대해 왜 그렇게 되는지 고민하고 이해하는 시간을 가질 수 있었다. JSX에서 중괄호 안에 JS 코드를 쓸 수 있는데 표현식만 쓸 수 있다. 그래서 if...else는 쓸 수 없고 삼항 조건 연산자만 쓸 수 있다. 전에는 그냥 예제들을 따라하다보니 자연스레 괄호 안에는 변수 선언을 하지 않았는데 이런 규칙이 있었는지 오늘 처음 알게 되었다. (사실 전에는 statement와 expression의 정확한 구분도 몰랐다.)

Today I Learned

React란

• UI를 만들기 위한 오픈소스 JavaScript 라이브러리

React의 3가지 특징

• 선언형

  • 무엇(What)에 집중하여 프로그래밍 하는 것

  • JSX를 사용한 선언형 프로그래밍 : 예를 들어, 명령형에서는 for 반복문을 사용해 리스트를 생성, 추가해야 했다면, JSX에서는 map()(내장고차함수)을 사용해 리스트를 생성할 수 있다.

<ul>
  {comments.map(comment => (
    <li key={comment.id}>
      <p>{comment.writer}</p>
      <p>{comment.content}</p>
    </li>
  ))}
</ul>

• 컴포넌트 기반

  • 컴포넌트 : 하나의 기능 구현을 위해 묶인 코드셋. React의 컴포넌트는 UI의 한 부분을 담당하는 서로 관련 있는 로직과 구조를 한 곳 담고 있다. 컴포넌트는 각자 독립적인 기능을 가지며 이를 조합하여 애플리케이션을 만든다.
  • React 애플리케이션은 컴포넌트들 간의 관례를 트리 구조로 형상화하여 표현 가능하다. 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가진다. (Root 컴포넌트)
  • 애플리케이션을 컴포넌트 단위로 분리하면 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다.
  • 유지보수가 용이하며 유닛테스트에도 유리하다.

• 범용성

  • JS 프로젝트 어디든 유연하게 적용 가능하다.
  • 페이스북에서 관리되어 안정적이고 현재 가장 유명한 프론트엔드 기술이다.
  • Node서버에서 렌더링할 수도 있고, React Native를 사용하여 모바일 애플리케이션을 만들 수도 있따.

JSX (JavaScript XML)

• React에서 UI를 구성할 때 사용하는 JS를 확장한 문법 (JS + 마크업). 브라우저에서 바로 실행할 수 없고 Bable로 컴파일하여 브라우저가 이해할 수 있는 JS로 변환하여야 브라우저에서 렌더링 할 수 있다.
• JSX로 React Element를 만들 수 있다.
• HTML 태그를 사용할 수 있으며 중괄호({}) 안에 JS 표현식을 넣을 수 있다.

왜 JSX를 사용할까?

• 기능과 구조를 한 곳에서 확인 가능하다.
• JSX없이도 React Element를 만들 수는 있지만 코드가 복잡해지고 가독성이 떨어진다.
• JSX는 필수는 아니지만 UI 관련 작업에서 가독성을 높임.

JSX 활용

• 컴포넌트에서 여러 요소를 return하고 있다면 반드시 전체를 감싸는 하나의 요소가 있어야 한다.

• Fragments로 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있다.

// React Fragment
return (
  <React.Fragment>
    <ChildA />
    <ChildB />
    <ChildC />
  </React.Fragment>
)
// Short Syntax
return (
  <>
    <ChildA />
    <ChildB />
    <ChildC />
  </>
)
// cf. Fragment는 key를 속성으로 가질 수 있다.

• class속성은 className으로 표기해야 한다.

• JSX 내에서 JS 표현식을 쓸 때, 꼭 중괄호({}) 안에 써야 한다. 중괄호를 사용하지 않으면 일반 텍스트로 인식한다.

• JSX 안에서는 JS 표현식(expression)만 사용가능하다. 구문(statement)은 사용할 수 없다. 따라서 if...else 조건문은 쓸 수 없고 삼항연산자(? :)를 사용한 조건 표현식만 쓸 수 있다. 표현식은 평가되어 하나의 값으로 귀결되는 것을 말한다.

<div>
  { (1+1===2) ? (<p>정답</p>) : (<p>오답</p>) }
</div>

• React Element가 JSX로 작성되면 그 이름은 대문자로 시작해야 한다. 소문자로 시작하면 일반 HTML 엘리먼트로 인식한다. (이렇게 따로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 부른다)

• 여러개의 HTML Element를 생성할 때는 map()함수 사용하며, 반드시 각 요소에 key 속성을 넣어 주어야 한다. key는 해당 요소를 식별할 수 있는 고유값이어야 한다.

function Comment() {
  const content = comments.map(c => {
    <li key={c.id}>
      <p>{c.text}</p>
      <p>{c.writer}</p>
    </li>
  });
  return (
    <ul>
      {content}
    </ul>
  )
}

Create React App

• SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.

• 빌드 툴 세팅에 대한 고민 없이 바로 개발을 시작할 수 있도록 해준다.

• 웹 애플리케이션을 개발하기 위해 필요한 패키지들(React, Babel, PostCSs, Webpack, Jest 등)을 포함한다.

• Create React App으로 프로젝트를 시작하기

npx create-react-app <project-name>