✍🏻 React 기초

React란?

• 프론트앤드 개발을 위한 JavaScript 오픈 소스 라이브러리

React를 쓰는 이유

선언형(Declarative)

• HTML/CSS/JS로 나눠서 작업을 하지 않고 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍
  • JSX이란?
    HTML과 JS가 결합한 문법을 기반으로 명시적으로 작성 가능

컴포넌트 기반(Component-Based)

• 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반
• 컴포넌트로 분리하면 서로 독립적으로 재사용 가능
• 기능 자체에 집중하여 개발 가능
• 유지 보수가 쉽다

범용성

• JS 프로젝트 어디에든 유연하게 적용 가능
• Facebook에서 관리되어 안정적
• 리액트 네이티브로 모바일 개발 가능

JSX란?

• JavaScript XML의 줄임 말로 문자열과 HTML이 아니다
  • XML이란?
    eXtensible Markup Language : 확장될 수 있는 표시 언어
    HTML과 XML의 차이점 : HTML은 태그가 확정되어 약속된 문법을 따르지만 XML의 태그는 사용자가 지정 가능하다
• JSX를 이용해 React 엘리먼트를 만들 수 있다
• JSX는 자바 스크립트의 확장된 문법이지만 자바 스크립트 코드는 아니다. 자바 스크립트 코드로 변환해주는 Babel이 필요하다.
  • Babel이란?
    Babel is a JavaScript compiler : JSX를 자바 스크립트 코드로 변환해주는 컴파일러

JSX 규칙

• 루트 엘리먼트 안에 모든 엘리먼트가 포함해야 한다 즉 opening tag와 closing tag로 감싸줘야 한다

  1 2 3 4 5 6 7 8

  <div>   <div>     <h1>Hello</h1>   </div>   <div>     <h2>World</h2>   </div> </div>

  cs

• 엘리먼트 클래스 사용 시 class가 아닌 className으로 표기

  1

  <div className="print">hi</div>

  cs

• 자바 스크립트 표현식 사용시, 중괄호 {} 이용

  1 2 3 4 5 6 7 8 9 10

  function app(){   const name = "zumwhol"   return (   <div>     hi {name}   </div>     ); }

  cs

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

  1 2 3 4 5 6 7 8 9 10 11

  function Hi(){     return <div>Hello</div>;   }   function HiWorld(){     return <Hi />;   }

  cs

• 조건부 렌더링에는 삼항 연산자 사용 (중괄호가 들어가면 표현식으로 인식)

  1 2 3 4 5

  <div>   {     (age < 18) ? (<p>true</p>) : (<p>false</p>)   } </div> Colored by Color Scripter

  cs

• 여러 개의 HTML 엘리먼트 표시는 map() 함수 이용

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

  const some = [   {id: 1, category: "shoes", brand: "Nike"}   {id: 2, category: "shoes", brand: "Adidas"} ];   function Basket(){   const choice = some.map((x) =>     <div key={x.id}>       <h1>{x.category}</h1>       <p>{x.brand}</p>     </div>   );   return (   <div>     {choice}   </div>   ); }   Colored by Color Scripter

  cs