[React] 기초 - Achievement Goals 답하기

React Intro Achievement Goals

1. React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.

React의 특징은 선언형, 컴포넌트 기반, 범용성이다. 아래 코드는 JSX(JS XML) 문법으로 작성되었다. WeatherContainer 안에 3가지의 컴포넌트가 구현되었다. 이처럼 코드 작성자가 아닌 다른 사람이 코드를 보면 웹페이지의  기능을 알기 쉽다.

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

다음은 장바구니 리스트와 제품을 컴포넌트로 분류한 코드이다. 고차함수 map을 이용해 Item 컴포넌트의 item변수에 배열 요소를 react의 item에 매핑하고 있다.

const Cart = ({ items }) => (
  <section className="cartcontainer">
    <h1>장바구니</h1>
    <SelectAllCheckBox>
    <div className="itemcontainer">
     {items.map((item) => <Item item={item}/>)}
    </div>
   </section>

이처럼 코드만 보고도 웹을 상상할 수 있다면 작성자의 코드는 선언적이고 컴포넌트 기반으로 잘 작성된 것이다. React는 JS프로젝트 어디에든 유연하게 적용된다. React native로 모바일 개발도 가능하다.

 

2. JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다

 

 

3. React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

기존의 FE 개발은 구조, 스타일, 작동 3대 요소를 HTML/CSS/JS로 따로 구분하여서 관심사 분리를 기반으로 진행되었다. React는 이와 달리 컴포넌트 기반이고 이는 하나의 특정 기능을 구현하기 위해 여러 코드를 묶어 두었고 그 묶음을 컴포넌트라고 하는 것이다.

 

그래서 컴포넌트를 구현하며 다른 컴포넌트와 독립적이고 해당 기능을 다른 곳에서 재사용이 가능하다는 장점이 생긴다. 개발자는 컴포넌트를 통해 기능 작동에 집하여 개발할 수 있으며 나중에 있을 유지보수와 단위 기능 테스트도 수월하게 된다.