037. React 입문 - State와 Props

개념

state는 계속해서 바뀌는 값을 저장해두는 변수를 말하고, 각각 상태 변경 함수를 둘 수 있다.

그리고 리액트는 반복되는 UI는 컴포넌트로 분리해서 별도의 파일에서 작성이 가능하다. 그리고 <Card/> 이러한 형태로 메인 컴포넌트에서 import하여 사용 가능하다.

그런데 부모 컴포넌트의 state가 변경되면 부모 컴포넌트는 재 렌더링이 되면서 부모 컴포넌트에 정의된 모든 state를 다시 초기화 하는 현상이 발생한다.

// App.jsx

const [users, setUsers] = useState(['장원영', '안유진']);
const [count, setCount] = useState(0);

만약 위와 같이 App 컴포넌트에 state가 여러개 정의 되어 있을 때 이름만 보더라도 users 상태와 count 상태는 기능적으로 연관이 없어 보이나, 카운트를 위한 setCount 함수가 동작하여 count라는 상태의 값이 변경되고 재 렌더링이 발생하면 users의 상태에도 재 렌더링이 발생하게 된다.

이는 불필요한 일이기 때문에 기능적으로 연관이 없는 state는 해당 state를 사용하는 자식 컴포넌트에 가서 정의 해주는 것이 좋다.

// App.jsx
// 아무런 state가 없음

function App () {
    return (
        <>

        {/* 컴포넌트를 import해서 쓰기만 하면 됨. */}
        <Card/>
        <Count/>
        </>
    )
}

// User.jsx
const [users, setUsers] = useState(['장원영', '안유진']);

// Count.jsx
const [count, setCount] = useState(0);