React란?

웹 어플리케이션을 개발하는 데 사용되며, 컴포넌트 기반으로 만들어진 JavaScript 프레임워크이다.

가상 돔 (Virtual DOM)

• React는 가상 돔(Virtual DOM)이라는 개념을 사용하여 효율적인 UI 업데이트를 한다.

• 가상 돔(Virtual DOM)이란 실제 돔(DOM)을 복제하여 동일한 구조를 가진 것이다.

• 실제 돔(DOM)과 달리 가상 돔(Virtual DOM)은 메모리에서만 존재하여 훨씬 가볍다.

• React는 실제 돔(DOM)을 직접적으로 업데이트 하지 않고, 가상 돔(Virtual DOM)을 변경하여 최종적으로 실제 돔(DOM)에 업데이트한다.
  때문에 효율적이고 빠르게 어플리케이션을 렌더링할 수 있게 된다.

• React는 가상 돔과 실제 돔의 차이를 비교하여 실제 돔을 업데이트하기 때문에, 실제 돔을 업데이트해야 하는 영역만 업데이트된다.

컴포넌트 (Component)

• React는 컴포넌트 기반 프레임워크이다.

• 컴포넌트란 웹 어플리케이션의 UI를 구성하는 최소 단위이다.

• 컴포넌트는 독립적으로 작성되고, 재사용에 용이하다.

상태 (State)

• React 컴포넌트는 상태(state)를 사용하여 데이터를 저장하고 관리할 수 있다.

• 상태(state)가 업데이트 되면 재렌더링, DOM을 업데이트한다.

Props

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법.

• 부모 컴포넌트에서 속성으로 넘겨준다.

• props는 객체로 전달된다.

• 자식 컴포넌트는 props의 속성을 사용하여 데이터에 접근할 수 있다.

• props는 단방향으로 데이터를 넘겨주는 방식이다.

//부모 컴포넌트
const Parents = () => {
	return (
    	<div>
      		<Child name="jam" age=18 />
      	</div>	
    )
}

//자식 컴포넌트
const Child = (props) => {
	return (
    	<div>안녕 나는 {props.name}이고, {props.age}살이야! </div>
    )
}

// 안녕 나는 jam이고, 18살이야!

• children
  - props 객체의 속성 중 하나로 부모 컴포넌트에서 자식 컴포넌트로 JSX요소를 전달해 준다.
  

//부모 컴포넌트
const Parents = () => {
	return (
    	<div>
        	<Child>이 곳은 children으로 넘겨지는 부분이야</Child>
      	</div>
    )
}

//자식 컴포넌트
const Child = (props) => {
	return (
      <p> {props.children} </p>
    )
}

// <p> 이 곳은 children으로 넘겨지는 부분이야 </p>

리액트 훅 (React Hook)

React Hook은 React 16.8 버전에서 소개된 새로운 기능이다.
함수형 컴포넌트에서 React 클래스형 컴포넌트에서만 사용할 수 있던 상태와 생명주기 (mount) 기능을 사용할 수 있게 해준다

• useState: 상태를 관리하는 Hook.

• useEffect: 컴포넌트가 초기 렌더링되거나 업데이트될 때 실행하는 Hook.

• useContext: 컴포넌트에서 컨텍스트를 사용하는 Hook.

• useRef: DOM 요소나 기타 값을 참조하는 Hook.

• useReducer: 상태를 관리하는 또 다른 Hook.