[react] Component, Props & State 기초

September 30, 2022

리액트 입문 강의 정리 노트 입니다. 📚 공식문서 : https://ko.reactjs.org/

리액트

UI를 구축하기 위한 라이브러리 . ‘컴포넌트’라고 불리는 작은 코드의 파편으로 복잡한 UI를 구성한다. SPA( Single Page Application )를 전제로 한다. Virtual DOM을 활용하여 업데이트가 필요한 DOM 요소만 업데이트 하기 때문에 리렌더링이 잦은 동적 모던 웹에서 빠른 퍼포먼스를 낼 수 있다.

컴포넌트

화면을 구성하는 하나의 단위. 하나의 컴포넌트는 아래와 같이 표현한다.

function App(){
    // javascript
    return (<div>
            // html(jsx)
            </div>)
}

즉, 컴포넌트는 html 을 반환하는 함수이다. ※컴포넌트 이름의 첫 글자는 대문자로, 폴더명의 첫 글자는 소문자로 시작하는 카멜식 표기법을 사용해야한다.

부모 자식관계의 컴포넌트

컴포넌트 안에 다른 컴포넌트를 품을 수 있다. 이 때 품는 컴포넌트를 ‘부모 컴포넌트’ 품어지는 컴포넌트를 ‘자식 컴포넌트’라고 부른다.

import React from "react";

function Child() {
  return <div>자식 컴포넌트 Text</div>;
}

function App() {
  return <Child />;
}

export default App;		// 출력값 : '자식 컴포넌트 Text'

JSX

컴포넌트에서 리턴하는 값은 HTML과 닮아있지만, 약간의 룰이 다른 JSX 문법이다. 아래 5개의 다른 점을 나열한다.

1개의 요소( element ) 만 사용할 수 있다.
```
<p>Hello!</p>
<p>world!</p>
```
위 예제는 p 요소가 2회 사용되어 사용이 어렵다.
```
<div>
    <p>Hello!</p>
    <p>world!</p>
</div>
```
아래와 같이 div 태그에 담아 1개의 요소로 표현할 수 있다.
자바스크립트 요소를 사용할 때 중괄호 {}를 사용해야한다.
```
<button onClick={alert('click!')}>Click!</button>
```
class 대신 className을 사용한다.
```
<div className="section"> </div>
```
inline style 입력 시 json 형식으로 값을 넣어줘야한다.
```
<div style=>Style Div</div>
```
위 예제에서 중괄호가 2회 사용된 이유는 json 형식도 중괄호{} 로 표현하고, 자바스크립트 요소도 중괄호{}로 표현하기 때문이다.

Props

부모는 자식 컴포넌트에게 데이터를 전달할 수 있다. Props는 이 전달을 위해 사용된다. 아래는 props를 이용해 정보를 전달하는 두 가지 예시이다.

props

기본적인 데이터 전송/수신 방식

  function Mother(){
      let name='Yeongsun'
      return <Child motherName={name} />	 //	1. Data 전달
  }
    
  function Child(props){					 // 2. Data 수신					
      return <div>{props.motherName}</div> // 3. Object{ motherName: Yeongsun } Object형식으로 전달된다.
  }

구조분해 할당

  function Child({ motherName }){			// Object의 구조분해 할당 방식이므로 key값인 motherName은 동일하게 사용해야한다.
      return <div>{motherName}</div>
  }

Default 값 설정하기 : 컴포넌트 내부에서 설정

  function Child({ motherName = 'Default값' }){	// ◀
      return <div>{motherName}</div>
  }

Default 값 설정하기 : 컴포넌트 외부에서 설정

function Child({ motherName }){
    return <div>{motherName}</div>
}
    
Child.defaultProps = {			// ◀
  motherName: 'Default값'
}

props.children

function Mother(){
	return <Child>엄마 컴포넌트에서 보냄</Child>
}
function Child(props){
    return <div>{props.children}</div>		
}											// '엄마 컴포넌트에서 보냄' sting이 출력된다.

prop.children방식은 Layout 컴포넌트를 만들 때 주로 사용된다.

State

컴포넌트 내부에서 바뀔 수 있는 값. props 방식으로 데이터를 전달하면 데이터를 받은 자식은 해당 데이터를 수정할 수 없다. State 객체는 set 이라는 함수를 함께 제공하여 자식이 데이터를 바꿀 방법을 열어준다.

import React, { useState } from 'react';		// import가 필요하다.

function Mother() {
    let [ name, setName ] = useState('Yeongsun');
    return <Child give_name={name} setName={setName} />;
}

function Child(props) {
    props.setName('영순')					// ▶ 기존 name의 값 전체를 대체한다.
    props.setName(prev => prev+'님')		 // ▶ 콜백함수형태로 입력할 경우 첫번째 매개변수로 기존 name값을 가져와 사용할 수 있다.
    return <p>이름은 {props.give_name} </p>	   
}											    // 출력값 : 이름은 영순님 → 4열에서 setName함수를 통해 값을 변경했다.

State와 Rerendering

React는 SPA( Single Page Application ) 방식으로 단 하나의 html 페이지를 갖는다. 때문에 작게는 여러 페이지로 구성되는 html문서의 redirect의 개념을 대신하는 것이 rerendering 이다. ( ~~라고 이해함~~ )

rerendering은 state가 변경될 때 변경 전/후의 메모리 주소를 비교하여 메모리 주소가 변경되었을 때만 실행되며, redirect와 같이 페이지 전체를 갈아 끼우는 것이 아니라 변경이 발생한 state만 부분적으로 rendering 한다.

Javascript에는 변하지 않는 자료형( Boolean, Number, String 등 )과 변하는 자료형이 있다. 변하지 않는 자료형이 있다. 변하지 않는 자료형은 값이 변하지 않기 때문에 메모리 주소를 변경하는 방식으로 값을 변경한다 때문에 값 변경 시 rerendering이 발생한다. Array 등의 자료형은 값을 변경시킬 수 있기 때문에 메모리 주소가 변경되지 않아 일반 대입 = 시 rerendering이 일어나지 않는다.

때문에 배열 또는 객체 등은 setState로 값 변경 시 전개 연산자를 사용해 배열을 복사한 새로운 배열을 만들어 사용한다. ( ~~고 이해함~~ )
```
// state의 자료형이 배열일 때
let [ book, setbook ] = useState({
    name: '질풍론도',
	author: '히가시노 게이고',
})
  
setbook([...book, {name: '나미야 잡화점의 기적', author: '히가시노 게이고'}]);		
// 위와 같이 전개연산자를 통해값을 추가한다.
```

Rose

리액트

컴포넌트

부모 자식관계의 컴포넌트

JSX

Props

State