TIL 4주차 5일 - React 기초

학습 내용

1. React

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

2. React 3가지 특징

2.1 선언형(명시적)

• 웹 페이지 하나를 만들기 위해 HTML, CSS, JS 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용
  JSX(Javascript XML) = JS + HTML 결합된 문법(언어)
  

2.2 컴포넌트 기반

• 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 하나의 컴포넌트를 만든다.
• 이러한 컴포넌트를 조합하여 하나의 웹페이지를 구현한다.
• 컴포넌트는 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중하여 개발할수 있으며 유지보수 및 변경이 쉽다.

2.3 범용성

• 자바스크립트 라이브러리 이기에 기존에 자바스크립트로 제작된 프로젝트에도 React 적용 가능

3. JSX

• JSX(Javascript XML) = JS + HTML 결합된 문법(언어)
• JSX 로 작성된 코드는 'Bable' 을 통하여 브라우저가 이해할 수 있는 Javascript 언어로 컴파일 되어 브라우저가 읽고 화면에 렌더링할 수 있습니다.
• 자바스크립트 DOM = HTML + CSS + JAVASCRIPT
  REACT DOM = JSX + CSS (명시적, 직관적)
• 컴포넌트 : 동작(Javascript)과 구조(HTML)에 대한 코드를 한 뭉치로 적은 코드셋
• 컴포넌트 들을 모아 하나의 웹페이지를 구현한다.

import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
 
  return <h1>Hello, {formatName(user)}!</h1>;
}

// 하나의 컴포넌트 예시 - Javascript 와 HTML을 동시에 처리한다.
// 함수와 비슷한 형태 및 구조로 엘리먼트(태그)로 이루어진 문장을 리턴한다.
export default App;

4. JSX 규칙

4.1 하나의 엘리먼트 안에 모든 엘리먼트가 포함

여러 엘리먼트를 작성하고자 하는 경우, 부모 태그가 반드시 필요

<div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h1>everyone</h1>
  </div>
</div>

4.2 클래스 사용시 className 으로 표기

<div className = "greeting'>Hello!</div>

4.3 Javascript 표현식 사용시, 중괄호 {} 이용

function App(){
  const name = 'lee'
  return (
    <div>
      Hello, {name}   // 중괄호가 없을시 변수가 아닌 텍스트로 인식
    </div>
  );
};

4.4 사용자 정의 컴포넌트는 대문자로 시작

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

functuon HelloWorld() {
return (<Hello />);
};
//소문자로 시작하게 되면 일반적인 HTML 엘리먼트(태그)로 인식

4.5 조건부 렌더링에는 삼항연산자 사용

 (조건) ? (참일경우) 출력물1 : (거짓일경우) 출력물2
 
 (조건1) ? (참일경우) 출력물1 : 
   (조건2) ? (참일경우) 출력물2 :
     (조건3) ? (참일경우) 출력물3 : 
       ......
         (거짓일경우) 출력물n
 
 <div>
   {
     (1+1 === 2) ? (<p>정답</p>) : (<p>틀림</p>)
   }
 </div>

4.6 여러 개의 HTML 엘리먼트를 표시할 떄, map(함수) 이용

const post = [
  {id:1, title: 'Hello World', content:'Welcome to learning React!'},
  {id:2, title: 'Installation', content:'You can install React from npm'}
];

function Blog () {
  const content = post.map((post)=>   // 화살표함수를 주로 쓴다.
    <div key={post.id}>       // key 값을 반드시 써야한다.
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

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

느낀 점 & 미비한 점

어렵다...어렵다... 변수 할당, 고차 함수, 리턴문, 태그 등 분명 다 아는 개념들인데 섞여서 쓰이니 머가 먼지 잘 모르겠다.
React 강의 영상들을 보며 더 공부를 해야 하면서 코드를 많이 써봐야 겠다.