[TIL] Unit 4. React 기초

🌱 React 기초 개념

---

• 정의 : 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다.

🌿 특징

1. 선언형(Declarative)이다.

   • HTML, CSS, JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
   • 어떻게(How)에 집중하는 명령형과 다르게 선언형은 무엇(What)을 구현할지에 집중하여 프로그래밍 하는 방식이다.

     다른 기술들을 한 곳에 모아 직관적으로 코드를 짤 수 있어서 개발자가 코드만 보고도 실제 웹앱을 유추할 수 있다!

   const Weather = () => (
     <WeatherContainer>
       <SearchInput />
       <CityInfo />
       <CurrentTemperature />
     </WeatherContainer>

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

   • 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트(구조 + 동작으로 이루어진 코드셋)를 기반으로 개발한다.
   • 컴포넌트로 분리하면 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있으며 유지보수, 유닛 테스트에 용이하다.
   • UI를 구성하는 필수 요소!!
   • 레이아웃에 따라 유동적으로 컴포넌트 위치를 변경할 수 있는 상향식 개발(Bottom-up) 방식에 적합하다.
   • 계층적 트리 구조(hierarchy tree structure) : 모든 리액트 애플리케이션은 최소 한 개 이상의 컴포넌트를 가지고 있으며, 내부적으로는 근원(root)이 되는 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다.

     예를 들어, 이미 구현된 사이트의 상단 헤더를 왼쪽 사이드바로 위치를 변경해야 할 때, HTML로 구조를 바꾼 후 CSS를 수정하고, 변경된 구조와 디자인에 맞춰 DOM 로직을 수정해야 한다. 하지만, 컴포넌트 기반으로 만들었다면 위치만 수정해주면 된다!

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

   • 리액트는 JS 프로젝트 어디에든 유연하게 적용 가능하다. Facebook에서 관리되어 안정적이고, 가장 유명하며, 모바일 개발도 가능하다.
   • Angular등의 프레임워크의 경우 해당 생태계에 종속된다. 리액트는 라이브러리여서 기존 프로젝트에도 사용 가능하다.

🌱 JSX (JavaScript XML)

---

• 정의 : 문자열도 아니고 HTML도 아닌 React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법. React 엘리먼트를 만들 수 있다.

• Babel : JSX은 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니기 때문에 브라우저가 이해할 수 있게 변환해주어야 함. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다.

• 장점 :
  • JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있다.
  • 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들고, 한눈에 컴포넌트를 확인할 수 있다. (HTML과 JavaScript를 한 파일에 작성)
  • DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발 가능하다.
  • JSX 없이도 React 엘리먼트를 만들 수 있지만, 코드가 복잡해지는 단점이 있어서 가독성 측면에서 좋은 JSX를 사용힌다.

// 일반 React 코드
return React.createElement (
  "hi", null, `Hello, ${formatName(str)}!`
)

// JSX 활용한 React 코드
return <h1>Hello, {formatName(user)}!</h1>;

🌿 JSX 문법 규칙

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함된다. (최상위에서 opening tag와 closing tag로 감싸줘야 함 ➡️ 리액트 컴포넌트 리턴 값은 하나의 JSX 표현식이어야 한다.)

<div> //opening tag
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h1>World</h1>
  </div>
</div> //closing tag

• 엘리먼트 클래스 사용 시, className으로 표기

// class로 표기할 시 React에서는 JavaScript 클래스로 받아들임
<div className="greeting">Hello!</div>

• JavaScript 표현식 사용 시, 중괄호 사용

function App() {
  const name = 'Hazel';
  
  return (
    <div>
      Hello, {name} // {} 사용하지 않으면 일반 텍스트로 인식
    </div>
  );
}

• 사용자 정의 컴포넌트는 대문자로 시작 (PascalCase)

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

function HelloWorld() {
  return <Hello/>; // 소문자로 작성 시 일반 HTML 엘리먼트로 인식
}

• 조건부 렌더링은 if문이 아닌 삼항연산자를 사용한다. (삼항 연산자는 표현식이며 하나의 값으로 나오기 때문)

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

• 여러 개의 HTMl 엘리먼트를 표시할 때, map() 함수를 이용

const posts = [
  {id: 1, title: 'Hi', content: 'Welcome!'},
  {id: 2, title: 'Hello', content: 'World!'}
];

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

// 이렇게도 사용 가능
function Blog() {
  const postToElement = (post) => (
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  );

  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(postToElement)}
    </div>
  );
}

🌱 Create React App

---

• 정의 : SPA(Single Page Application)을 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.

• React 외에도 Babel(JS 컴파일러), Jest(테스트 프레임워크), PostCSS(css 트랜스파일러), Webpack(모듈 번들러) 등이 사용되는데, React는 이러한 모든 개발 환경 셋팅을 툴 체인으로 제공한다.

npx create-react-app [project_name]

🌱 알게된 점 & 느낀 점

---

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
• JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
• React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

🌱 추가 학습

---

• 리액트 공식문서에서 key 찾아보기
• Warning : Each child in a list should have a unique "key" prop. 오류 해결 방법
• Component 기반 개발

| 참고자료 |

• CodeStates - UrClass