React②

정혜지·2022년 8월 9일

React

현재 함수형 컴포넌트 사용

JSX 사용이유 : 문법이 간단하다.

JSX 문법

function Hello () {
  return (
    <h1>Hello, React</h1>
  )
}

JSX사용X -> 원래 렌더링 함수
ReactDOM.render()

ver0

const element = {
  type: 'h1',
  props: {
    className: "title",
    children: 'Hello, React'
  }
}

ver1

ReactDOM.render(
  <h1>Hello, React</h1>
  document.getElementById('root');
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

ver2

const element = React.createElement(
  'h1',
  {className: "title"},
  'Hello, React'
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX 문법으로 reactdom.render()대신 간편하게 사용가능

Babel
https://babeljs.io/
컴파일러

const element = (
	<button className="btn-success">
      <b>
        Hello, React
      </b>
  	</button>  
);

위 코드가 자바스크립트 객체형태로 바뀌게 되면??

const element = {
	type: "button", 
  props: {
  	className: "btn-success"
    children: {
    	type: "b",
      props: {
      	children: "Hello, React"
      }
    }
  }
}

리액트 엘리먼트

리액트 어플리케이션에서 화면구성을 하는 가장 작은 블럭
화면에 나타나는 내용을 구성하고 있는 자바스크립트 객체
Real DOM 엘리먼트의 가상 표현 방법(VDOM)

⭐리액트 엘리먼트특징⭐

엘리먼트가 생성된 이후에, 내부의 데이터가 변하지 않는 불변성이라는 특징을 갖는다.
-> 내용이 변경되어야 하는 경우에는 새로운 엘리먼트를 만들어서 기존의 엘리먼트와 교체(VDOM 동작내용)

❕ ❕ ❕

: 따라서 엘리먼트 내용의 화면에 출력하기 위해서는 ReactDOM의 render()함수를 사용해야한다.

: 변경된 데이터를 화면에 출력하기 위해서는 반드시 렌더링의 과정 필요

엘리먼트 실습
watch

컴포넌트와 props

https://ko.reactjs.org/docs/components-and-props.html

Component

함수형 컴포넌트
클래스 컴포넌트

props

properties의 약어
read only값 : 새로운 데이터 할당 불가능
리액트 컴포넌트가 갖고 있는 속성

실습: Library, Book

ver1. props

function Library (props) {
  const color = {color: 'red'}

  return(
    <div>
      <h1>{`책 이름: ${props.bookName}`}</h1>
      <h1  style={color}>{`책 가격: ${props.bookPrice}`}</h1>
    </div>
  );
}

ver2. 비구조화 할당

function Library (bookName, bookPrice) {
  const color = {color: 'red'}

  return(
    <div>
      <h1>{`책 이름: ${bookName}`}</h1>
      <h1>{`책 가격: ${bookPrice}`}</h1>
    </div>
  );
}

ver3. children을 이용한 할당

function Library ({children}) {
  
  return(
    <div>
      <h1>{`책 이름: ${bookName}`}</h1>
      <h1  style={color}>{`책 가격: ${bookPrice}`}</h1>
    </div>
  );
}

4 컴포넌트 합성
여러개의 컴포넌트를 합쳐 새로운 컴포넌트를 만드는 것

<Library bookName="React 실습1" bookPrice={15000} />
<Library bookName="React 실습2" bookPrice={20000} />
<Library bookName="React 실습3" bookPrice={25000} />

5 컴포넌트 추출
복잡한 컴포넌트를 쪼개어 단위별의 컴포넌트를 만드는 것

function Library (bookName, bookPrice) {

  return(
    <div>

      <Book bookName="React 실습1" bookPrice={15000} />
      <Book bookName="React 실습2" bookPrice={20000} />
      <Book bookName="React 실습3" bookPrice={25000} />

    </div>
  );
}