21.7.8 TIL (react intro)

react란?

react는 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리

jsx란?

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
html도 JavaScript 코드도 아니기 때문에 Babel이라는 컴파일러가 JavaScript 코드로 컴파일후 브라우저가 화면에 렌더링 할 수 있다

react intro

학습목표

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

react의 3가지 특징

• 선언형 = 하나의 파일에 명시적으로 작성할 수있게 jsx를 활용한 선언형 프로그래밍을 지향
  코드를 보고 무슨기능을 가지고 있는지 쉽게 확일 할 수 있는 장점이 있다

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

• 범용성 = 자바스크립트 프로젝트 어디에도 유연하게 작용 할 수 있다

map 함수를 이용한 엘리먼트 반복

react에서 여러 데이터를 렌더링할때 map함수를 사용
return 문 안에서 인라인으로 바로 map함수로 리턴 할 수 있고
return 문 밖에서 변수에 할당하여 그 변수를 return문에서 리턴 할 수 있다.
중요한 건 map함수 사용시 key 속성을 데이터의 id 값을 할당한다

// return문 밖에서 변수로 할당하여 return문에서 그 변수를 리턴
let langs = ["JavaScript", "HTML", "Python"];

  let viewLangs = langs.map((it) => {
      return <p>{it}</p>;
    });
    
  return (
    <div>
      {viewLangs}
    </div>
  );



// 리턴문 안에서 인라인으로 작성한 경우
let langs = ["JavaScript", "HTML", "Python"];

  return (
    <div>
       {langs.map((it) => {
        return <p>{it}</p>;
      })} 
    </div>
  );

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