[리액트를 다루는 기술 3장] 컴포넌트

3.1 클래스형 컴포넌트

---

컴포넌트를 선언하는 방식에는 함수 컴포넌트와 클래스형 컴포넌트가 있다.

// 클래스형 컴포넌트
class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>;
  }
}

// 함수형 컴포넌트
function App() {
  const name = 'react';
  return <div className="react">{name}</div>;
}

• 클래스형 컴포넌트
  state 사용 가능
  라이프사이클 사용 가능
  임의 메서드 정의 가능
  render 함수 반드시 있어야 함

• 함수형 컴포넌트
  클래스형 컴포넌트보다 선언하기 간편하고 메모리 자원도 덜 사용함
  프로젝트를 완성하고 빌드한 후 배포할 때도 결과물의 파일 크기가 더 작음(그러나 클래스형 컴포넌트와 성능과 파일 크기 면에서 사실상 별 차이가 없으므로 이 부분은 너무 중요하게 여기지 않아도 됨)
  리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 state와 라이프사이클 기능과 비슷한 기능을 사용 가능
  

리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장한다.

3.2 첫 컴포넌트 생성

---

따라서 생성했다...(딱히... 쓸 것이...)

3.3 props

---

import "./App.css";
import MyComponent from "./MyComponent";

function App() {
  return (
    <div className="App">
      <MyComponent>All that is gold does not glitter</MyComponent>
    </div>
  );
}

export default App;

import React from "react";

const MyComponent = (props) => {
  return <div>{props.children}</div>;
};

export default MyComponent;

3.4 state

---

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꿔줘야만 한다.

• this.setState가 끝난 후 특정 작업 실행하기

<button
  onClick={() => {
    this.setState(
      {
        number: number + 1
      },
      () => {
        console.log('방금 setState가 호출되었습니다.');
      }
    )
  }}
>
  +1
</button>

3.5 state를 사용할 때 주의 사항

---

state 값을 바꾸어야 할 때는 setState 또는 useState를 통해 전달받은 세터 함수를 사용하여 바꿔야 한다.

다음은 잘못된 코드이다.

// 클래스형 컴포넌트
this.state.number = this.state.number + 1;
this.state.array = this.state.push(2);
this.state.object.value = 5;

// 함수형 컴포넌트
const [object, setObject] = useState({ a: 1, b: 1 });
object.b = 2;

배열이나 객체를 업데이트 해야 할 때는 바꾸고자 하는 대상의 사본을 만들고 그 사본에 값을 업데이트 한 후, 그 사본의 상태를 setState 혹은 세터 함수를 사용해서 업데이트 해야 한다.

// 객체
const object = { a: 1, b: 2, c: 3 };
const nextObject = { ...object, b: 2 }; // 사본을 만들어서 b 값만 덮어쓰기

// 배열
const array = [
  { id: 1, value: true },
  { id: 2, value: true },
  { id: 3, value: false }
];

// 새 항목 추가
let nextArray = array.concat({ id: 4 }); 
// 결과
nextArray = [
  { id: 1, value: true }, 
  { id: 2, value: true }, 
  { id: 3, value: false }, 
  { id: 4}
];

// id가 2인 항목 제거
nextArray.filter((item) => item.id !== 2); 
// 결과
[
  { id: 1, value: true },  
  { id: 3, value: false }, 
  { id: 4}
];

// id가 1인 항목의 값을 false로 바꿈
nextArray.map((item) => (item.id === 1 ? { ...item, value: false } : item)); 
// 결과
nextArray = [
  { id: 1, value: false }, 
  { id: 2, value: true }, 
  { id: 3, value: false }, 
  { id: 4}
];