Unit11 - [React] Intro

호박이와 칼림바·2023년 9월 26일
JSX개발개발자리액트컴포넌트프론트엔드

프론트엔드 코스

목록 보기
9/9
post-thumbnail

코드스테이츠 - 유어클래스 콘텐츠를 참고하여 작성하였습니다.

[Day 7]

2023년 7월 5일


📗목차

리액트의 3가지 특징

  • 선언형
    리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

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

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

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에 배치할 수 있게 되는 것.

DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요하다.

Inline 방식이나 script 태그를 이용하여 외부 JavaScript 파일을 연결할 수도 있다.

하지만 React에서는 JSX를 이용해서 앞서 보았던 DOM 코드보다 명시적으로 코드를 작성할 수 있다.

JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.

이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 한다.

하지만 여기서 궁금증이 생긴다.
JSX 없이는 React 요소를 만들 수 없는 걸까?

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

아래와 같이 Hello, HTML DOM을 화면에 표시하기 위해서 아래 예시처럼 HTML(index.html)과 JavaScript(index.js)를 연결하는 작업을 진행해야 한다. 그렇다면 React에서는 어떻게 작업할까?



아래 예제는 JSX를 쓰지 않은 React를 먼저 나타내고 있습니다.

JSX 쓰지 않은 결과를 확인한 후, 주석 처리를 진행해보자.
코드 라인 17번째 줄 주석을 해제하면 JSX를 활용한 React의 결과를 확인할 수 있다.

DOM에서 봤던 예시와 다른 점이 보이는가?
우리는 App.js 이 한 개의 JavaScript 파일 안에서 HTML과 JavaScript로 나누어졌던 두 가지 일을 한 번에 처리하고 있다.

처음에는 HTML과 JavaScript를 한 곳에 작성하는 게 어색할 수 있지만, 하나의 파일에서 웹 애플리케이션의 구조와 동작을 한눈에 파악할 수 있다. 이렇게 JSX는 개발자가 코드만 바라보는 게 아니라, 구조를 바라보게 돕는다.

JSX 규칙

JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸줘야 한다.

React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 한다.

만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야 한다.

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

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

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

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

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

<정답>

  // TODO: postToJSX 함수를 이용하여 에러를 해결하고 여러 개의 엘리먼트롤 표시해보세요.
  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(postToJSX)}
    </div>
  );

map을 이용한 반복

React에서 여러 데이터를 렌더링 할 때 사용하는 map 메서드에 대해서 알아보도록 하자. 빠른 이해를 위해 코드스테이츠 수강생 김코딩의 React TIL 블로그 개발을 예시로 들어보겠다.

김코딩의 블로그 포스트가 두 개밖에 없다면 아래 코드로 충분하다. 이렇게 직접 모든 데이터를 코드에 작성하는 것을 하드코딩(hard coding)이라고 한다.

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

function Blog() {
  return (
    <div>
      <div>
        <h3>{posts[0].title}</h3>
        <p>{posts[0].content}</p>
      </div>
      <div>
        <h3>{posts[1].title}</h3>
        <p>{posts[1].content}</p>
      </div>
    </div>
  );
}

하지만 김코딩의 블로그 포스트가 100개인 경우는 어떻게 헤야 하는가? 이런 상황에서는 블로그 포스팅이 늘어날 때마다 매일 코드를 변경해야만 한다.
데이터가 변경될 때마다, 알아서 렌더링할 수는 없을까? React에서는 이런 문제를 해결하기 위해서 배열 메서드 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!' },
  ];

function Blog() {
  return (
    <div>
      <div>
         <h3>{posts[0].title}</h3>
         <p>{posts[0].content}</p>
     </div>
      <div>
         <h3>{posts[1].title}</h3>
         <p>{posts[1].content}</p>
      </div>
      {// ...}
      <div>
         <h3>{posts[99].title}</h3>
         <p>{posts[99].content}</p>
      </div>
     {// ... 98 * 4 more lines !!}
   </div>
  );
}

반복적으로 작성해야 하는 부분만 골라서 배열의 요소로 넣으면 React가 이를 인지하고 모든 요소를 렌더링한다. 

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

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

💭 return 문 안에서 map 메서드를 사용할 수는 없을까?

사용할 수 있다. JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 메서드의 결과를 return문 안에 인라인으로 처리할 수 있다. 코드 가독성을 위해 변수로 추출할지 아니면 인라인에 넣을지는 개발자가 판단해야 할 몫이다.

key 속성
React에서 map 메서드 사용 시, key 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다. key 속성의 위치는 map 메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣어주면 된다.

function Blog() {
  // postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방합니다.
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

💭 key 속성값이 반드시 id가 되어야 하나? id가 존재하지 않으면 어떻게 해야 하는가?

key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 한다. key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문이다. 정 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결할 수 있다. 배열 인덱스는 최후의 수단(as a last resort)으로만 사용한다.

컴포넌트

"컴포넌트가 무엇인가?"라는 질문에 대해서 사람들은 컴포넌트는 "하나의 기능 구현을 위한 여러 종류의 코드 묶음이다." 혹은 "UI를 구성하는 필수 요소이다."라고 한다. 누군가는 "컴포넌트는 React의 심장이다."라고까지 표현하기도 한다.

React를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있습니다.

모든 React 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다.

유튜브 예시를 보이겠다.

UI를 개편하고자 기존의 헤더를 화면 왼쪽으로 옮겨 사이드바로 만들려고 한다. 헤더를 사이드바로 변경하기 위해 우린 무얼 해야 할까?


먼저 HTML을 수정하여 구조를 바꾸고, 화면의 상단에 맞추어 작성되어 있던 스타일 속성을 화면 왼쪽에 맞게 수정해야 한다. 변경된 구조와 스타일에 맞추어 자바스크립트가 DOM을 조작하게끔 수정해 주는 것 역시 필요하다.


반면 같은 애플리케이션을 React를 이용하여 컴포넌트 기반으로 만들었다고 생각해보자. 컴포넌트는 각자의 기능을 가지고 있으며, UI의 한 부분을 맡고 있다고 하였다. 때문에 원하는 수정사항에 맞추어 기존 컴포넌트의 위치만 수정해 주면 된다. 컴포넌트 기반 개발의 장점이 느껴지는가?

profile
호박이와 칼림바
프론트엔드 개발자입니다.
이전 포스트

Unit10 - [JS/Node] 비동기

0개의 댓글