[week_08] React 기초 Ⅰ(3) Props와 State

1. Props

기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없다. 주로 Component의 재사용을 위해 사용한다.

/* 1. 컴포넌트 생성 */
const Welcome = (props) => {
	return <h1>Hello, {props.name}</h1>
}


/* 2. 컴포넌트 사용 */
const App = () => {
	return <div>
    	<Welcome name="수영" />
        <Welcome name="민수" />
        <Welcome name="영희" />
    </div>;
}

Props는 읽기 전용이다. 따라서, Props 값을 변경해서 사용하고 싶다면 Props의 값을 임의로 변경해서 사용하는 것이 아니라, 새로운 변수를 생성해서 해당 값을 복제한 뒤 원하는 대로 변경해서 사용한다.

1-1. DOM Element의 Attributes

• 기본적인 DOM Element(div, span 등)들의 Attribute는 camel case로 작성한다.
  • 예) tabIndex, className 등
• 그러나 'data-' 또는 'aria-'로 시작하는 Attribute는 예외다.
  • 예) data-type, aria-label 등
• HTML의 Attribute와 다른 이름을 가지는 Attribute가 있다.
  • 예) class ➡ className, for ➡ htmlFor 등
• HTML의 Attribute와 다른 동작 방식을 가진 Attribute가 있다.
  • 예) checked(defaultChecked), value(defaultValue), style 등
  • HTML에서 checked 또는 value는 해당 값이 초기값으로 쓰이지만, React에서는 현재 값을 의미한다.
  • 따라서 초기값의 의미로 checked나 value를 사용하고 싶다면, default~~를 설정해야 한다.
• React에서만 쓰이는 새로운 Attribute가 있다.
  • 예) key, dangerouslySetInnerHTML 등
  • key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
  • key는 Element에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 한다.
  • key는 배열 내의 형제 사이에서 고유해야 하나, 전체 범위에서 고유할 필요는 없다.
  • 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.

 

2. State

State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. State는 Component 내에서 유동적으로 변할 수 있는 값을 저장한다. 개발자가 의도한 동작에 의해 변할 수도 있고, 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다. State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링한다. state를 바꾸면 함수가 다시 실행된다.

/* State의 선언 */
import { useState } from "react";

const App = () => {
    const [value, setValue] = useState(초기값);
    return ...
}

import { useState } from 'react';

function Example() {
	const [count, setCount] = useState(0);
    return (
    	<div>
        	<p>버튼을 {count}번 눌렀습니다.</p>
            <button onClick={() => setCount(count + 1)}>클릭</button>
        </div>
    );
}

2-1. State를 사용할 때 유의할 점

1) State 값을 직접 변경하지 말 것

• State 값을 직접 변경하게 되면, React가 Component를 다시 렌더링할 타이밍을 알아차리지 못하므로 반드시 setState 함수를 이용해서 값을 변경해야 한다.
• setState 함수를 호출할 때 React에게 '다시 렌더링 해주세요' 라는 명령이 내려진다.

/* 1. setState에 변경할 값을 넣기 */
const [count, setCount] = useState(0);
setCount(count + 1);


/* 2. setState에 함수를 넣기 */
const [count, setCount] = useState(0);
setCount((current) => { // 매개변수로 현재 count 값을 받게 된다.
	return current + 1 // return 값으로 State가 변경된다.
});

• Object를 갖는 State를 만들 때 주의사항

/* Object State의 잘못된 예시 */
const [user, setUser] = useState({name: "민수", grade: 1})
setUser((current) => {
	current.grade = 2;
    return current;
})

위와 같이 Object를 값으로 갖는 State도 만들 수 있으나, 위 예시의 경우 React가 State의 변경을 감지하지 못한다. user object 안의 grade가 변경되었지만 user 자체는 변경되지 않았기 때문이다.

/* Object State의 올바른 예시 */
const [user, setUser] = useState({name: "민수", grade: 1})
setUser((current) => {
	const newUser = { ...current } // 기존 값을 spread로 복사
    newUser.grade = 2
    return newUser
})

따라서, 기존 user의 내용을 복사해서 새로운 Object에 담고 grade를 변경해야 한다.

 

3. 렌더링이 되는 경우

1) 부모 컴포넌트가 렌더링 됐을 때
2) props에 변경이 생겼을 때
3) state가 변경됐을 때