Props (Properties ?= Attribute)

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

{/*컴포넌트 생성*/}
const Welcome = (props) => {
	return <h1>Hello, {props.name}</h1>;
}
{/*컴포넌트 사용*/}
const App = () => {
	return (
    	<>
            <Welcome name='Alex'/>
            <Welcome name='Jason'/>
            <Welcome name='Justin'/>
            <Welcome name='Claire'/>
    )
}

props는 읽기 전용(Read Only)

const Welcome = (props) => {
	const name = `{props.name} 님`;
    	return <h1>Hello, {name}</h1>;
}

만약 Props의 값을 변경해서 사용하고 싶다면, 새로운 변수를 생성해서 값을 복제한다.

DOM Element의 Attributes

• 기본적인 DOM Element(div, span 등)들의 Attribute는 camel case로 작성. (tabIndex, className)

• 'data-' 혹은 'aria-'로 시작하는 Attribute는 예외이다. (data-type, aria-label) p.s: 'aria-'는 접근성과 관련된 설정.

• HTML의 Attribute와 다른 이름을 가지는 Attribute가 있다. (class -> className, for -> htmlFor)

• HTML의 Attribute와 다른 동작 방식을 가진 Attribute가 있다. ( checked(defaultChecked), value(defaultValue), style )

• React에서만 쓰이는 새로운 Attribute가 있다. (key, dangerouslySetInnerHTML)

HTML과 다른 방식의 React Attribute(checked,value)

(<input type='checkbox' checked={false}/>)

HTML에서 checked 또는 value는 해당 값이 '초기값'으로 쓰이지만, React 내에서는 현재 값을 의미한다.

예를 들어, checked 값이 false로 고정되있는 경우에 사용자가 checked를 클릭해도 값의 변화가 일어나지 않는다.
만약, '초기값'의 의미로 checked 또는 value를 사용할 경우, defaultChecked, defaultValue Attribute를 설정해야 한다.

React에서만 쓰이는 새로운 Attribute(key)

const Names = () => {
   const names = [
   	{key: '1', value: 'Alex'},
        {key: '2', value: 'Justin'},
        {key: '3' value: 'Claire'},
   ];
   return (
   	<div>
	   {names.map((item) => {
  		<li key={item.key}>{item.value}</li>
  	   ))};
	</div>
   )
};

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할 지 식별하는 것을 돕는다.
Key는 Element에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 한다.
Key는 배열 안에서 형제 사이에서 고유해야 하지만, 전체 범위에서 고유할 필요는 없다.
두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.

State

State는 Component 내에서 유동적으로 변할 수 있는 값을 저장한다.

개발자가 의도한 동작이나 사용자의 입력에 의해 새로운 값으로 변할 수 도 있다.

State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링한다.

import {useState} from 'react';

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

State 값은 직접 변경할 수 없다.

import {useState} from 'react';

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

State값을 직접 변경하게 되면 React가 Component를 다시 렌더링할 타이밍을 알아차리지 못한다.

반드시 setState 함수를 이용해 값을 변경해야 한다.
setState 함수를 호출할 시, React에게 다시 렌더링하라는 명령이 내려지기 때문이다.

State를 변경하는 두 가지 방법

setState내에 변경할 값을 넣기

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

setState에 함수 넣기

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

setState 함수에는 변경할 값을 직접 넣는 방법이 있고, 함수를 넣는 방법 두 가지가 있다.
함수를 넣는 경우 함수가 반환(return)하는 값으로 State가 변경된다.
현재 값을 기반으로 State를 변경할 경우에는 함수를 넣는 방법이 권장된다.

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

const [user,setUser] = useState({name:'민수', grade: 1})

setUser((current) => {
    current.grade = 2;
    return current;
})

Object를 값으로 갖는 State도 만들 수 있다. 그러나 위의 경우 React가 State의 변경을 감지하지 못하는 문제가 생긴다.

State안 객체의 요소가 변경되었지만, State 자체는 변경되지 않았기 때문이다.

따라서,

객체 요소를 담는 object 자체가 변경되지 않는다면, React가 변화를 감지하지 못하기 때문에, 기존 객체의 내용을 새로운 object에 담은 후 내용을 변경하는 것이 옳은 방법이다.

const [user,setUser] = useState({name: '민수', grade: 1})
setUser((current) => {
	//값을 복사
    const newUser = {...current};
    newUser.grade = 2;
    return current;
})

이와 같이 현재 State의 값을 복사하여 만든 새로운 객체의 값을 변경하여 객체를 통째로 반환해야 React가 변화를 감지하고 이를 화면에 반영해 줄 수 있다.

한줄 평: 리액트를 활용한 개발에 있어 중요한 기본 개념인 Props(속성요소)와 State(상태값)에 대해 제대로 정리하는 것이 중요하다는 것을 깨달았다.