React

• JavaScript 라이브러리

JSX

기본 개념

• JSX(JavaScript XML)

• JavaScript 확장 문법

• 하지만 브라우저가 바로 실행할 수 있는 JS코드가 아니기 때문에 Babel 로 브라우저가 이해할 수 있게 컴파일
  ⇒ 컴파일 후 JS를 브라우저가 읽고 화면에 렌더링

• DOM과 다르게 CSS, JSX 문법만으로 웹 애플리케이션 개발 가능
  ⇒ 하나의 컴포넌트를 구현하기 위해 필요한 파일이 줄어듬
  ⇒ JS만으로 마크업 형태의 코드를 작성해 DOM에 배치할 수 있음

• JS문법과 HTML문법을 동시에 이용해 기능과 구조를 한눈에 확인

규칙

• 여러 엘리먼트를 작성할 때 최상위 opening tag 와 closing tag 로 감싸주기

• CSS class 속성 지정 시 className 으로 표기

• JavaScript 쓸 땐 꼭 중괄호 {} 이용(안 쓰면 일반 텍스트로 인식)

• 사용자 정의 컴포넌트는 대문자로 시작
  ⇒ 소문자로 시작하면 일반적인 HTML엘리먼트로 인식
  ⇒ function Hello() <Hello />

• 조건부 렌더링은 if가 아닌 삼항연산자 사용해야 함

• 여러개의 HTML 엘리먼트 표시할 때 map() 함수 사용
  ⇒ 반드시 key JSX 속성 넣어야 함

const posts = [
  {id: 1, title: 'Hello', content: 'content1'},
  {id: 2, title: 'Hi', content: 'content2'}
];

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

---

map 이용한 반복

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React via npm." },
];

function Blog() {
  return (
    <div>
      <div>
        <h3>{posts[0].title}</h3>
        <p>{posts[0].content}</p>
      </div>
      <div>
        <h3>{posts[1].title}</h3>
        <p>{posts[1].content}</p>
      </div>
    </div>
  );
}

⇒ 만약 posts 가 100개가 넘으면?
⇒ 하나하나 쓰지 않고(하드코딩 하지 않고), 배열 메서드 map 활용!

map을 이용한 반복

배열의 각 요소(post)를 특정 논리(postToElement 함수)에 의해 다른 요소로 지정(map) 하기

function Blog() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

⇒ return문 안에 map 메서드 사용할 수 없나?
⇒ JSX 사용하면 중괄호 안에 모든 표현식 포함 가능하기 때문에 map 의 결과를 return 문 안에 인라인으로 처리 가능
⇒ 코드 가독성을 위해 변수로 추출할지 or 인라인으로 넣을지는 개발자가 판단

key 속성

React 에서 map 메서드 사용 시, key 속성 안 넣으면 리스트의 각 항목에 key 넣어야 한다는 경고 표시
⇒ key 속성의 위치는 map 메서드 내부에 있는 첫 엘리먼트에 넣어주기!!

key 의 속성값은 되도록 데이터에서 제공하는 Id를 할당
⇒ 변하지 않고, 예상 가능하며, 유일해야 함!
⇒ 만약 고유한 id가 없다면 배열 인덱스에 넣어서 해결 가능하지만 최후의 수단

function Blog() {
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
   ));
  rerutn <div className="post-wrapper">{blogs}</div>
}

---

컴포넌트(Component)

• 리액트는 컴포넌트들의 관계를 트리 구조로 형상화해 표현할 수 있음
• 마크업, 디자인, 로직을 긴밀하게 연결해 개발 가능
• 재사용 가능해 효율적인 개발 가능
• 각각 컴포넌트는 고유의 기능을 가지고 있으면서 UI의 한 부분 담당
  ⇒ 이런 독립적인 컴포넌트들을 여러 개 만들고 이것들을 모아서 복잡한 애플리케이션을 만들 수 있음
• 만약 상단의 header를 sidebar 형태로 바꾸고 싶다면?
  ⇒ 원하는 수정사항에 맞춰 기존 컴포넌트의 위치만 수정해주면 됨
  
  

---

Create React App

• 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
• 리액트 프로젝트를 만드는 최적화된 도구로 Bable, webpack 같은 도구들이 이미 포함되어 있어 따로 설정할 필요가 없음
• npx create-react-app 으로 새로운 리액트 프로젝트 시작 가능