컴포넌트란?

• React에서 페이지를 구성하는 최소단위이다.
• Component의 이름은 대문자로 시작한다.
• 함수형 컴포넌트와 클래스 컴포넌트로 나누어진다.
  
  

함수형 컴포넌트

먼저 함수형 컴포넌트를 선언해주고, ReactDOM.render()를 이용해 렌더링을 해주면 된다. 매개변수로 함수형 컴포넌트를 <함수 이름 />와 같은 형태로 넘겨주고 요소를 표기할 곳을 함께 넘겨준다. props(properties)를 이용해서 name을 할당해 줄 수 있다.

function Hello() {
  const { name } = props
  return <h2>Hello, {name}!</h2>;
}

ReactDOM.render(<Hello name="gildong" />, document.getElementById('root'));

Props란?

기본적으로 컴포넌트에 원하는 값을 넘겨줄 때 사용하며 변수, 함수, 객체, 배열 등 Javascript의 모든 요소를 넘겨줄 수 있다. 컴포넌트의 재사용을 위해서 주로 사용된다. 그리고 props의 값은 임의로 변경해서 사용하면 안된다. 만약 변경을 해야 한다면 새로운 변수를 생성해서 값을 할당 후 이용해야 한다.

// 잘못된 예시
const Welcome = (props) => {
	props.name = props.name + "님";
    return <h1>Hello, {username}</h1>
}

// 올바른 예시
const Welcome = (props) => {
	const username = props.name + "님";
    return <h1>Hello, {username}</h1>
}

클래스형 컴포넌트

클래스형 컴포넌트도 마찬가지로 렌더링을 해주면 되며 구조만 약간 다르다.
class 선언 시 React.Component의 메소드들을 사용하기 위해서 extends를 이용해 React.Component를 상속받도록 구현해야 한다. 상속 시 해당 클래스형 컴포넌트에서 render() 메소드가 구현되어야 하는데 HTML을 반환해주면 됩니다. 아래는 위의 함수형 컴포넌트와 동일한 기능을 합니다.

class Hello extends React.Component {
  render() {
  	const {name} = this.props
    return <h2>Hello, {name}</h2>;
  }
}

ReactDOM.render(<Hello name="gildong"/>, document.getElementById('root'));

초기 React의 Component는 모두 클래스형 컴포넌트 였다고 한다.
이후 v16부터 새로운 함수형 컴포넌트와 Hooks가 발표되었고
지금은 함수형 컴포넌트가 주로 사용되고 있다.

---

State란 무엇인가?

State는 Props처럼 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다. 다만 Props는 컴포넌트에 전달되어 사용되는 반면 State는 컴포넌트 안에서 관리된다는 차이가 있다. 즉, Props는 함수의 매개변수처럼 사용되는 것이고 State는 함수 내에 선언된 변수처럼 사용되는 것이다.

State는 컴포넌트 내에서 유동적으로 변할 수 있는 값을 저장하는데 State 값이 변경되고 재렌더링이 필요한 경우 React가 자동으로 계산하여 변경된 부분을 렌더링한다.

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
        <span>{count}회 클릭하였습니다.</span>
        <button onClick={
            () => {
                setCount((current) => {
                    return current + 1;
                })
            }
        }>클릭</button>
    </div>
  );
}

export default App;

State 값을 변경하는 방법

State 값을 직접 변경하게 되면 React가 컴포넌트를 다시 렌더링할 타이밍을 알아차리지 못한다. 반드시, setState() 함수를 이용해서 값을 변경해야 한다. setState() 를 호출할 때 React가 재렌더링을 한다.

기존 count 값을 이용해서 State를 변경하는 경우에는 함수를 이용한 방법을 이용하는 것이 권장된다.

setState에 내에 값을 바로 넣기

const [count, setCount] = useState(0);
setCount(count + 1);

setState에 함수를 넣기

const [count, setCount] = useState(0);
setCount((current) => {
	return current + 1
})

Object를 갖는 State를 변경하는 방법

새로운 변수를 선언하고 현재 값을 복사한 후 변경해야 한다. 아래와 같이 newPerson을 만들고
Spread Operator 를 이용해서 current 값을 복사하고 수정한 값을 반환한다.

import { useState } from 'react';

function App() {
  const [person, setPerson] = useState({
    name: "홍길동",
    count: 0
  });
  
  return (
    <div className="App">
        <button onClick={()=>{
            setPerson((current)=>{
                const newPerson = { ...current };
                newPerson.count = newPerson.count + 1;
                return newPerson
            })
        }}>클릭</button>
        <span>{person.name}님이 버튼을 {person.count}회 클릭하였습니다.</span>
    </div>
  );
}

export default App;