[React] React 정의와 특징

1. React란?

페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리

2. React 특징

1. 선언적

• 원하는 결과를 선언
• DOM조작은 React에게 전적으로 위임

2. 가상 DOM

• 리액트가 Ui를 자동으로 업데이트하기 위한 방법
• 가상 돔을 통해 dom 조작을 계산한 뒤, 한번에 dom을 조작
  브라우저가 처리해야할 연산량이 줄어듬 -> 성능 향상

3. 컴포넌트 기반

1. 독립적으로 재사용 가능한 ui 단위
2. 다른 컴포넌트를 포함할 수 있다.
   • 컴포넌트간 계층관계를 형성가능
   • 컴포넌트를 조합해서 큰 컴포넌트를 만들 수 있음
3. 가독성이 향상되며 유지보수에 용이하다.

3. React 특징

1. 클래스 컴포넌트

• state, lifeCycle 등의 기능을 사용할 수 있어서 초창기에 많이 사용
• 문법과 동작이 복잡하다

2. 함수

• 직관적이고 사용하기 쉽지만 기능을 사용하지 못했음
  -> Hook으로 문제점을 해결

3. JSX

• 자바스크립트 확장문법
• HTML + JS
  -> 마크업과 로직을 한번에 작성
  But 정식 자바스크립트 문법이 아니기때문에 브라우저에서는 이 문법을 해석할 수 없음
• Babel이란 컴파일러를 통해서 React.createElement()함수로 변환됨

JSX 문법

1. JSX javascript value

  const title = <h1>hello world</h1>;
  return title;

2. 자바스크립트 값 포함 => {}를 사용
   If, for문은 사용할 수 없다

   const name = "구수정";
   const addOne = (num) => {
     return num + 1;
   };
   return (
     <h1>
       hello {name} {addOne(38)}
     </h1>
   );

3. 속성 정의 가능
   Js에 가까운 문법이기 때문에 camelCase로 표현

   const titleName = "title";
   return <h1 className={titleName}>hello</h1>;

4. 이벤트 처리가능
   on+이벤트명

   const titleName = "title";
   const introduce = () => alert("hello");
   return (
     <h1 className={titleName} onClick={introduce}>
       hello
     </h1>
   );

5. inline style
   javascript 객체 형식으로 표현

   const style = {
     color: "red",
   };
   // return <h1 style={style}>hello world</h1>;
   return (
     <h1
       style={{
         color: "red",
       }}
   
       hello world
     </h1>
   );

6. 열린태그 금지, 어떤 태그든 셀프클로징 가능

7. 반드시 하나의 부모태그로 감싸있어야한다.
   <h1></h1><p></p> => NO
   <div><h1></h1><p></p></div> => YES
   사용하지 않는 div태그를 추가하는것은 비효율적
   -> 실제 돔에는 추가되자않고 jsx를 그룹화하기 위해서 React.Fragment사용
   <React.Fragment><h1></h1><p></p></React.Fragment>
   === <><h1></h1><p></p></>