[WIL] 8월 1주차

Weekly I Learned (08. 02 ~ 08. 08)

이번 주는 React 라는 것에 대해서 배워보고 직접 사용해 보게 되었습니다.
사실 배우기 전에도 React 라는 것에 대해서 많이 들어본 기억이 있는데 직접 사용을 해보니 일단 구조적으로 따로 따로 작성하기 보단 하나로 통합하여 작성할 수 있다는 것이 매우 편리하게 느껴졌습니다. 물론 약간의 작성법은 다르지만 그래도 근본적으로 작성하고 싶은 내용은 같기 때문에 그 아이디어에서 파생되어 작성법만 숙지하여 잘 다룬다면 앞으로도 유용하게 쓸 수 있지 않을까 싶었습니다.

그럼 이번주에 배운 React 에 대하여 간단하게 서술하여 보겠습니다.

특징

리액트는 3가지 특징을 가집니다. '선언형, 컴포넌트 기반, 범용성'

선언형 (Declarative)

리액트는 하나의 페이지를 보여주기 위해 HTML / CSS / JS 로 나누어 작성하는 것이 아닌 하나의 파일에 명시적으로 작성할 수 있도록 JSX를 활용한 선언형 프로그래밍을 지향합니다.

컴포넌트 기반 (Component-Based)

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

컴포넌트 단위로 구현하면 컴포넌트간 의존성이 없어져 독립적으로 작동합니다. 그래서 이전에 작성된 기능을 구현할 때 해당 컴포넌트를 재사용 가능하여 효율적입니다.

컴포넌트는 기술적 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발하며 마크업, 디자인, 로직을 긴밀하게 연결하여 개발 가능(loosley coupled) 합니다.

범용성 (Learn Once, Write Anywhere)

리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있습니다. 프레임워크는 생태계에 종속되지만 리액트는 기존 프로젝트에도 유연하게 사용이 가능하며 안정적이고 가장 유명하고 또한 React Native 로 모바일 개발도 가능합니다.

JSX

JSX란?

JSX는 JavaScript XML의 줄임말입니다.
이것은 문자열도, HTML도 아니고 React에서 UI를 구성할 때 사용되는 문법입니다.
JavaScript를 확장한 문법으로 이 문법을 통해 React 엘리먼트를 만들 수 있습니다.

JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아닙니다. 이것은 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 합니다.

이때 사용되는 것이 Babel 입니다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일을 하게 됩니다, 그리고나서 JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있습니다.

React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다. 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들고 한눈에 컴포넌트를 확인할 수 있다는 걸 뜻합니다.

JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는것 입니다.

마크업과 로직을 분리하지 않고 UI를 만들 수 있으며 HTML과 같은 문법을 활용하므로 디자이너와 협업에도 편리한 점 기억해 두어야 겠습니다.

function App() {
   const user = {
     firstName: 'Harper',
     lastName: 'Perez"
   };
  
  function formatName(user) {
    return user.firstName + ' ' + user.lastName;
  }
  
  return {
    <>
      <h1>
        Hello, {formatName(user)}!
      </h1>
    </>
  }
}

React에서는 JSX를 이용해서 앞서 보았던 DOM 코드보다 명시적으로 코드를 작성할 수 있습니다. JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있습니다.
이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 합니다.

물론 JSX 없이도 React 요소를 만들 수 있습니다. 다만 코드가 복잡하고, 가독성이 떨어지는 단점이 있죠.

규칙

JSX는 자바스크립트를 확장한 문법이므로 자바스크립트 기본 문법이 가능합니다. 그러나 JSX는 지켜주어야 하는 규칙들이 존재합니다. 그것들에 대해서 서술하여 보겠습니다.

<div>                         <div>
 <h1>Hello</h1>                 <div>
</div>                            <h1>Hello</h1>
<div>                           </div>
 <h2>World</h2>                 <div>
</div>                            <h2>World</h2>
                                </div>
                              </div> 
        X                              O

JSX에서 여러 엘리먼트를 작성할 땐, opening tag와 closing tag를 통해 감싸주어야 합니다.

<div class = "greeting">Hello!</div>            (X)
<div className="greeting">Hello!</div>          (O)

React 에서 CSS class 속성을 지정하기 위해선 className 으로 표기해야 합니다.
만약 class로 작성하면 React 에서는 이를 html 클래스 속성이 아닌 자바스크립트 클래스로 받아들이므로 주의해야 합니다.

function App() {
  const name = 'park hyun woo';
  
  return (
     <div>
       Hello, {name}!
     </div>
    );
}

JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 합니다.
중괄호를 사용하지 않으면 일반 텍스트로 인식합니다.

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

function HelloWorld() {
 return <Hello />;
}

React 엘리먼트가 JSX로 작성되면 대문자로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 됩니다.

이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부릅니다.

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

조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 합니다.

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

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

React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용합니다.

map 함수를 사용할 때는 반드시 key JSX 속성을 넣어야합니다.
key JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.

+
컴포넌트에서 배열 개수만큼 엘리먼트를 렌더링할때 키값을 설정하는데 이때 무작위의 난수로 설정할 경우 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠질 수 있습니다. 그리하여 키값은 데이터의 ID로 주로 사용하며 최후의 수단으로는 인덱스를 사용합니다!