4-1. [React] React 기초

 

# React ?

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

 

리액트의 3가지 특징

• 선언형
• 컴포넌트 기반
• 범용성

 

---

# 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에 배치할 수 있게 되는 것이죠!

 

 

 

주의할 점은 JSX는 HTML처럼 생겼지만,
HTML이 아니기 때문에 앞서 언급했던 “Babel”을 이용한 컴파일 과정이 필요하겠죠?
그럼 실제 예제를 통해서 우리가 왜 JSX를 써야 하는지 살펴보도록 합시다.

DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요합니다.
Inline 방식이나 script 태그를 이용하여 외부 JavaScript 파일을 연결할 수도 있습니다.

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

 

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

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

JSX를 사용함으로써 코드를 이해하기 쉬워집니다.
그리고 앞서 설명했던 Babel이 알아서 이 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를 넣어야 한다는 경고가 표시됩니다.

---

# React 개념정리

• 여러 엘리먼트들의 겉에서 전체를 감싸는 Tag가 필요하다.
• class 속성 사용시 class 대신 className을 사용한다.
• JSX에서 JavaScript 사용시 {중괄호}를 사용한다.
• React 엘리먼트를 JSX로 사용시 대문자로 시작한다.(사용자 정의 컴포넌트)
• 조건부 렌더링은 삼항연산자를 사용한다.
• 여러개의 HTML 엘리먼트는 map()함수를 사용한다.
• map함수 사용시에는 반드시 key를 넣는다.

Key란?

key는 React에서 배열의 각 항목을 유일하게 식별하는 데 사용되는 특별한 속성입니다.

React는 컴포넌트의 업데이트를 효율적으로 관리하기 위해 Virtual DOM을 사용하는데,
이때 각 엘리먼트에 고유한 식별자가 필요합니다.

key는 보통 배열의 각 항목에 대해 유일한 값을 가져야 하며,
이 값은 해당 항목의 변경 여부를 판단하는 데 도움이 됩니다.
주로 데이터의 고유 식별자를 사용하게 됩니다.
예를 들어, 여기서는 id가 고유 식별자로 사용되고 있습니다.

코드에서는 이미 key={post.id}로 올바르게 설정되어 있습니다.
이렇게 하면 React가 각 포스트를 식별할 수 있고, 업데이트를 효율적으로 다룰 수 있습니다.

Q. key가 post.id 가 아니라 post.title이 되어도 되나?

A.

일반적으로 React에서는 key로 사용되는 값이 각 항목을 유일하게 식별할 수 있는 값이어야 합니다.
이것은 각 항목이 고유해야하며, 변경되지 않는 값을 사용하는 것이 좋습니다.
id는 이러한 목적으로 자주 사용되지만, 다른 유일한 값을 사용할 수도 있습니다.

post.title을 사용하는 경우에는 몇 가지 주의할 점이 있습니다:

1. 유일성 보장:
   모든 title이 고유하다는 보장이 있어야 합니다.
   중복된 title이 있으면 key로 사용할 경우 문제가 발생할 수 있습니다.
   
   
2. 변경 가능성 고려:
   만약 title이 변경될 수 있는 값이라면,
   id와는 달리 key로 사용하기에는 적절하지 않을 수 있습니다.
   key는 안정적으로 유지되어야 합니다.
   
   
3. 성능 고려:
   id가 숫자인 경우 숫자는 일반적으로 빠르게 비교됩니다.
   문자열인 경우에도 큰 문제는 없겠지만, 숫자와 비교했을 때 성능적인 이점이 있을 수 있습니다.

요약하면, post.title을 key로 사용하는 것이 가능하긴 하지만,
유일성과 안정성 등을 고려하여 적절한 값을 선택하는 것이 좋습니다.
일반적으로 id와 같이 고유하며 안정적인 값을 사용하는 것이 권장됩니다.

Q. 보통 그러면 react에서 id를 설정해주는 편이야?

A.

네, React에서는 일반적으로 id 속성을 사용하여 각 항목을 유일하게 식별하는 데에 활용합니다.
이는 몇 가지 이유로 인해 일반적인 관례입니다:

1. 고유성 보장:
   id는 일반적으로 각 항목을 고유하게 식별할 수 있는 값으로 사용됩니다.
   이는 중복이 없고, 모든 항목이 서로 다른 id 값을 가지는 것을 보장합니다.
   
   
2. 안정성: 일반적으로 id는 항목이 생성될 때 할당되고 그 후에는 변경되지 않습니다.
   이는 React의 업데이트와 재렌더링 관련 성능 최적화에 도움이 됩니다.
   
   
3. 성능: id가 숫자인 경우 숫자 비교는 빠르게 처리되므로,
   숫자형 id를 사용하는 것이 일반적으로 성능적으로 유리합니다.

따라서, 가능하다면 데이터의 고유 식별자로 사용될 수 있는 id를 사용하는 것이 좋습니다.
이는 React 컴포넌트의 효율적인 업데이트 및 재렌더링을 보장하고, 코드를 안정적으로 유지하는 데에 도움이 됩니다.

---

# map을 이용한 반복

데이터가 변경될 때마다, 알아서 렌더링할 수는 없을까요? 
React에서는 이런 문제를 해결하기 위해서 배열 메서드 map을 활용합니다.

# 배열 메서드 map의 특성 

• 배열의 각 요소를
• 특정 논리(함수)에 의해
• 다른 요소로 지정(map)합니다.

현재 posts의 요소는 블로그 포스트의 id, title, content로 나눌 수 있습니다.
이 정보를 브라우저에서 React로 보여주려면 JSX를 활용해서 이 데이터를 적절히 넣어야 합니다.
단순한 문자열에 불과했던 posts의 요소를 HTML 엘리먼트로 이 정보의 구조를 잘 짜 놓은 모습으로 매핑하면 되겠습니다.
이것을 의사코드로 작성해 봅시다.

배열의 각 요소(post)를 특정 논리(postToElement 함수)에 의해 다른 요소로 지정(map) 합니다.

React에서는 위 의사코드를 아래와 같이 적을 수 있습니다. 
반복적으로 작성해야 하는 부분만 골라서 배열의 요소로 넣으면 React가 이를 인지하고 모든 요소를 렌더링합니다. 
앞으로 배우실 컴포넌트를 재사용성 있게 만들면 단순 반복되는 코드를 간결하게 작성할 수 있습니다.

 

[코드] 배열 메소드 map 활용

unction 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 메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣어주세요.

[그림] key를 넣어야 한다는 경고가 표시

key 속성값이 반드시 id가 되어야 하나요? id가 존재하지 않으면 어떻게 해야 하나요?
key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 합니다. 
key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문입니다. 
정 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결할 수 있습니다. 
배열 인덱스는 최후의 수단(as a last resort)으로만 사용합니다. 
리액트 공식문서의 key에서 추가로 공부하세요.

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>;
}

 

---

# Component

 

 

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

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

 

 

먼저 근원이 되는 root 컴포넌트가 있고 그 아래 헤더, 콘텐츠 리스트가 옵니다. 
헤더는 자신의 아래에 서치와 세팅 같은 자식 컴포넌트를, 
콘텐츠 리스트는 각각의 영상 콘텐츠들을 자식 컴포넌트로 가질 수 있습니다. 
이러한 트리 구조에서 보듯이 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당하고 있습니다. 
우리는 이렇게 독립적인 컴포넌트들을 여러 개 만들고 이들을 한데 모아 복잡한 UI를 구성할 수도 있고, 
더 나아가 최종적으로는 복잡한 애플리케이션도 만들 수 있습니다.

 

* 컴포넌트 기반 개발의 특징으로 볼 수 없는 것은?

컴포넌트 기반 개발은 웹 애플리케이션에서 각 기능 별로 하나의 컴포넌트를 작성하도록 권장합니다.
그래서 컴포넌트 간 의존성이 낮아지고 독립적으로 작동합니다. 하나의 기능 변경 시 다른 컴포넌트를 수정할 필요가 없기 때문입니다.
예를 들어, 원하는 수정 사항에 맞추어 컴포넌트의 위치만 수정해 주거나 재사용할 수 있습니다.

---