React - JSX, map, component

React의 가장 큰 세가지 특징

선언형

명령형과 반대말이다. 기존에 공부하고 짰던 코드처럼 위부터 아래까지 로직으로 쭈루룩 보고 해석해야하며 'A하면 A'하고, B하면 B'해라'와 같이 논리적으로 이해해야하는 명령형과 반대의 특징을 가진다.
코드만 봐도 직관적으로 이해할 수 있다는 점이 그것인데, 쓸데없는데 시간을 쓰는 것을 막아 생산성을 향상시키고 효율적으로 서비스를 낼 수 있도록한다.
즉 선언형은 '무엇'이 일어나는지, 명령형은 '어떻게' 일어나는지에 주목한다는 차이이다.

컴포넌트 기반

기능별로 분리해서 관리하여, 컴포넌트 간 의존성을 줄이고 독립적으로 사용할 수 있도록 한다.
이는 유닛 테스트를 가능하게하고 추후 유지보수에도 매우 용이하다. 작은 단위로 나누어 사용하므로 재사용성이 증가한다.

범용성

프레임워크가 아닌 JS 라이브러리이므로 기존 코드를 뒤엎지않고 유연하게 적용할 수 있다.

JSX

: Javascript XML
JSX는 리액트의 장점을 극대화시킬 수 있다.

리액트의 포인트는 기능 단위로 UI가 어떻게 보여야할지 정의하는 일종의 함수인 Component이다.
HTML을 구조화하는 용도로, JS를 유저 인터렉션 생성의 용도로 분리해서 사용하기보다 이 두 기술 자체는 합치고 오히려 기능 단위로 유닛을 나누어주는 것이다.

JSX은 브라우저가 바로 실행하지 못해서 중간에 Babel로 한번 컴파일해야한다.

JSX rules

• 여러 엘레멘트를 쓰려면 꼭 싸악 묶어주자
• CSS class 속성 지정은 className 으로!
• JS 관련 내용은 {중괄호}로 묶어주자
• 사용자 정의 컴포넌트들은 반드시 대문자로 시작한다
• 조건부는 if문이 아니라 삼항연산자를 쓴다
  : if문은 할당이 가능한 표현식이 아니기 때문!
  

실습 예제 하나만 복습해보자

let langs = ["JavaScript", "HTML", "Python"];
  let viewLangs = () =>
    langs.map((it) => {
      return <p>{it}</p>;
    });

  return (
    <div>
      {viewLangs}
    </div>
  );

viewLangs함수에서는 langs 배열에 있는 요소들을 map method를 이용해 p태그 속 콘텐츠에 넣어진 모습으로 맵핑한다.

이때 viewLangs의 결과물은 배열 속에 엘리먼트들이 있는 꼴이다.

[<p>Javascript</p>, <p>HTML</p>, <p>Python</p>]

map의 콜백함수 리턴문 p태그 속에 중괄호를 쓴 it이 있다는 것을 기억하자! 중괄호가 없다면 langs의 요소를 가리키는 매개변수 it이 아닌, 그냥 텍스트 it이 될 것이다.