[11주차 - DAY4] 리액트(1)

 

 

리액트 동작 원리

1. HTML 파싱으로 DOM트리를 구축하여 브라우저에 렌더링 한다.
2. 리액트 컴포넌트의 상태나 프로퍼티가 변경되면 가상 DOM에 변화된 부분만 업데이트한다.
3. 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분을 식별한다.
4. 변경된 부분만 실제 DOM에 업데이트한다.

가상 DOM을 사용하지 않고 실제 DOM에 바로바로 업데이트하면 화면 깜빡임이 심하다. 그리고 변화된 부분만 DOM에 업데이트하기 때문에 렌더링 속도가 빠르다.

 

 

프로젝트 생성

js 기반 리액트 프로젝트는 터미널에 다음 명령어를 입력하여 생성할 수 있다.

npx create-react-app 프로젝트명

ts 기반 리액트 프로젝트는 터미널에 다음 명령어를 입력하여 생성할 수 있다.

npx create-react-app 프로젝트명 --template typescript

 

 

jsx

자바스크립트 확장 문법으로, 리액트 컴포넌트에서 HTML을 사용할 수 있다.

App.jsx 또는 App.tsx파일의 App 컴포넌트에서 리턴한 내용들이 화면에 그려지게 된다.

function App() {
  ...

  return (
    <div>
      <h1>Hello</h1>
      <p>welcome</p>
    </div>
  );
}

실행 화면

작성 규칙

최상위 태그는 하나만 존재해야 한다.

아래 코드와 같이 리턴할 때 최상위 태그는 하나만 존재해야 한다.

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>welcome</p>
    </div>
  );
}

다음 코드처럼 최상위 태그가 하나만 있는 게 아니면 오류가 발생한다. 최상위 태그에는 이름 없는 태그(<></>)를 사용해도 된다.

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>welcome</p>
    </div>
    <div>
      <h2>test</h2>
    </div>
  );
}

 

닫는 태그를 반드시 써야 한다.

<input>이나 <br> 같은 self-closing 태그의 경우에도 끝에 /를 붙여서 닫아줘야 한다. 닫는 태그 없이 사용하면 오류가 발생한다.

<input type="text" />
<br />

 

JSX 표현식

자바스크립트 표현식은 중괄호 안에 작성한다.

function App() {
  let name = '리액트';
  
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>welcome</p>
    </div>
  );
}

 

class 대신 className 사용

class라는 키워드는 자바스크립트에서 예약어이기 때문에 태그에 클래스명을 지정할 때는 className을 사용한다.

function App() {
  let name = '리액트';

  return (
    <div className='container'>
      <h1 className='test'>Hello, {name}!</h1>
      <p>welcome</p>
    </div>
  );
}

 

인라인 스타일 적용 시 객체 사용

인라인 스타일을 사용할 때는 객체를 사용해야 한다. 또한, 객체 내부에서 css 속성을 카멜 케이스로 작성하며, 속성 값은 따옴표로 감싸야한다.

function App() {
  let name = '리액트';
  const style = {
    backgroundColor: 'black',
    color: 'white',
    fontSize: '48px',
    fontWeight: 'bold',
    padding: '20px'
  }

  return (
    <div style={style}>
      <h1>Hello, {name}!</h1>
      <p>welcome</p>
    </div>
  );
}

 

 

배운 점

• 리액트는 초기 렌더링 → 가상 DOM 변경 → 재조정 → 실제 DOM 업데이트 순으로 동작한다.
• App 컴포넌트에서 리턴한 내용들이 화면에 그려진다.
• 최상위 태그는 하나만 존재해야 한다.
• 닫는 태그를 반드시 써야 한다. self-closing 태그일 경우 끝에 /를 붙여서 닫아준다.
• 자바스크립트 표현식은 중괄호 안에 작성한다.
• 태그에 클래스명을 지정할 때는 className을 사용한다. class는 자바스크립트 예약어이기 때문이다.
• 인라인 스타일 적용 시 객체를 사용하며, CSS 속성명은 카멜 케이스로 작성하고, 속성 값은 따옴표 안에 작성한다.