리엑트 노트

1. 리엑트는 어쩌다가 만들어졌는가?

다른 라이브러리나 프레임워크는 자바스크립트의 특성 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어서 업데이트 하는 작업을 하여 작업을 간소화 해주는 웹개발이라면 리엑트는 다른 프레임워크와 달리 DOM을 아예 날려버리고 처음부터 모든 것을 새로 만들어 주면 어떨까? 하는 아이디어에서 시작된 것이라고 한다. 하지만 모든 것을 날려버리고 새로 시작하게 되면 속도가 느릴 것이기 때문에 리엑트에서 Virtual DOM이라는 것을 사용하여 가능하게 만들었다.(Virtual DOM: 가상 DOM)

Props의 정의

정의: props는 읽기 전용이며 변경이 불가능하다. 부모컴포넌트가 자식컴포넌트에게 데이터를 전달해주어 사용할 수 있게 만드는 것이다.

prop의 defaultProps

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 값을 사용하는 방법

Hello.js

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </>
  );
}

export default App;

=> 컴포넌트에 지정하지 않아도 defaultProps의 값이 도출된다.