리액트

• 자바스크립트의 라이브러리이며 SPA 및 모바일 애플리케이션 개발에 많이 사용됨
• 컴포넌트 기반으로 컴포넌트를 이용해 UI를 만듦
• hook을 이용한 컴포넌트 생명 주기 관리가 가능하다

---

리액트의 동작 원리

1. 초기 렌더링
2. 가상 DOM
3. 변경 감지 및 비교
4. 부분 렌더링
5. 브라우저 업데이트

• ⚠️ DOM (document object model) : 문서 객체 모델
• ⚠️ 렌더링 : 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정

📌가상돔

메모리 내의 DOM의 복사본으로 DOM에 대한 변화를 효율적으로 관리하고 최적화 한다.

그럼 어떻게 효율적으로 관리하고 최적화 하는 것인가??

• 렌더링 효율성 : UI 변경 사항을 가상 DOM에 적용한 다음 실제 DOM에 필요한 부분만 변경하기 때문에 효율성을 높임
• 성능 최적화 : 위와 동일한 이유로 필요한 렌더링만 수행하여 성능 최적화

집을 짓기 전에 미리 건축 계획을 세우는 것!!
이라고 생각하면 좋을 듯

---

JSX 기초 문법

JSX : 기존 JS 문법을 명시적이고 가독성 좋게 만들어 둔 것

// 기존 JS 문법
const App = () => {
  return React.createElement('div', null, 'hello, 리액트');
};

//jsx 문법
const App = () => {
  return (
    <div className="App">
      <h1>Hello, React!!</h1>
    </div>
  );
};

기존 JS보다 html 코드와 비슷하기 때문에
무엇을 나타내는 지 명시하기 좋고 가독성이 향상되었다.

📌인라인 스타일

특정 요소에만 스타일을 적용시키는 것!!
기존 인라인 스타일 시트를 JSX에 적용시키는 방법이다.

const App = () => {
  const style = {
    backgroundColor: 'black',
    color: 'white',
    fontSize: '46.5px',
    fontWeight: 'bold',
    padding: 20,
  };

  return (
    <div className="App">
      <h1 style={style}>Hello, React!!</h1>
    </div>
  );
};

객체를 생성 후 적용시킨 방법

return (
  <div className="App">
    <h1
      style={{
        backgroundColor: 'black',
        color: 'white',
        fontSize: '46.5px',
        fontWeight: 'bold',
        padding: 20,
      }}>
      Hello, React!!
    </h1>
  </div>
);

태그에 바로 적용 시킨 모습