[React] Props와 State

🤖 Props란?

props

props는 컴포넌트에 원하는 값을 넘겨줄 때 사용하는 것으로, 다음과 같이 사용한다.

function App() {
  return (
    <div>
      <Greeting name="React" />
    </div>
  )
}

App 이라는 함수형 컴포넌트에서 Greeting 컴포넌트를 사용하는데, Greeting 컴포넌트에 name 이라는 변수를 넘겨주는 상황이다.

딱 js에서 매개변수가 있는 함수를 호출할 때 인자로 값을 넘겨주어 사용하는 것처럼, 이렇게 리액트에서 컴포넌트에 어떠한 값을 넘겨줄 수가 있고 그 값을 컴포넌트 선언부에서 사용하기 위해 쓰는 것이 props라는 친구다.

function Greeting(props) {
  console.log(props);
  return <h2>Hello, {props.name}!</h2>;
}

Greeting 컴포넌트를 다음과 같이 정의하여 넘겨준 name 값을 사용할 수 있는데, Greeting 함수의 매개변수로 쓴 props가 위의 <Greeting name="React" /> 에서처럼 컴포넌트에 넘겨준 변수들을 받아준다.

위 코드를 실행시켜보면 2번째 줄에 써놓은 console.log(props)에 의해 브라우저 콘솔창에 {name: 'React'} 라고 나오는 것을 볼 수 있을 것이다.

그렇다. props는 object이다. 컴포넌트에 넘겨준 변수들을 프로퍼티로 갖는 object인 것이다.

이 예시는 넘겨주는게 name 밖에 없어서 props가 name이라는 프로퍼티 하나만 갖고 있지만, 만약 <Greeting name="킴민수" age=27 job="백수" /> 라고 했다면 props는 {name: "킴민수", age: 27, job: "백수"} 인 object일 것이다.

따라서 props로 값을 받고 그 값을 사용하려면 js에서 객체의 프로퍼티에 접근하는 것과 동일하게 props.변수명 으로 사용하면 되는것이고, 자바스크립트 표현식이기 때문에 { }로 감싸주면 된다.

이렇게 같은 컴포넌트를 원하는대로 그때그때 다른 값을 넘겨줌으로써 컴포넌트를 다양하게 재사용하기 위해 사용하는게 props인 것이다!

👀 props는 그냥 매개변수명일 뿐, 반드시 이름을 props로 해라! 라고 정해진게 아니기 때문에 다른 이름으로 해도 전혀 상관없다. 하지만 properties의 줄임말인 props 라는 이름으로 하는게 관례이기 때문에 그냥 props로 하자

props는 변경 불가

근데 이런 props는 우리가 직접 값을 변경할 수가 없다.

function Greeting(props) {
  props.name = "개똥이";
  return <h2>Hello, {props.name}!</h2>;
}

이와 같이 컴포넌트 함수 내에서 props로 받은 값을 직접적으로 변경할 수는 없다. 물론 클래스형 컴포넌트도 마찬가지, 함수형 클래스형 뭘로 선언했든 props를 수정할 수는 없다.

모든 React 컴포넌트는 props와 관련한 동작을 할 때 순수 함수처럼 동작해야한다.

출처 : React 공식문서

props 값을 직접 변경할 수는 없지만, 굳이 받은 props값을 변경하여 출력하고 싶다면

function Greeting(props) {
  const newName = "존잘 " + props.name;
  return <h2>Hello, {newName}!</h2>;
}

이와 같이 그냥 props 변수에 다른 값을 붙여 새로운 변수로 만들고 그 변수를 출력하면 된다(...)

default props

컴포넌트에 꼭 props를 직접 넘겨주지 않고도 기본적으로 사용할 수 있는 props를 지정할 수 있다. 이를 default props라고 한다.

지정하는 방법은 다음과 같다.

Card.defaultProps = {
  tags: "디폴트 프롭스"
}

function Cart({tags}) {
  return <h1>{tags}</h1>

컴포넌트명.defaultProps에 원하는 props명으로 이루어진 객체를 지정해주면 된다.

그 객체에 지정한 프로퍼티들이 해당 컴포넌트의 default props가 되고 컴포넌트 함수에서 매개변수로 props를 받을때와 마찬가지로 받아서 사용하면 된다.

🦎 State란?

state

리액트는 기본적으로 컴포넌트 내에서 유동적으로 바뀔 수 있는 값은 state 라는 변수를 이용해서 저장한다.

원래 함수형 컴포넌트에서는 state 기능이 없었지만 Hook 이라는 개념이 도입되면서 함수형에서도 state를 쓸 수가 있게 되었다. 여기서는 함수형 컴포넌트에서의 state 사용법에 대해 정리해보고자 한다.

state는 props와 마찬가지로 js 객체이다.

일단 state를 사용하려면 react의 useState를 import 해야 한다.

import { useState } from 'react'

그리고 console.log(useState(0)) 이라고 하면 콘솔창에 Array 객체가 나온다. 이 배열을 펼쳐보면 첫번째 요소는 useState의 인자로 넘겨준 0이 들어가있고, 두번째 요소는 어떠한 함수가 들어가있다.

이 두번째 요소인 함수가 바로 첫번째 요소의 값을 우리가 원하는 값으로 변경해주는 함수이다(이 함수를 보통 "setState 함수" 라고 칭함).
그리고 첫번째 요소가 우리가 useState의 인자에 적어준 값으로, state 변수의 초기값이 된다.

이를 이용해 useState로 state 변수를 선언하는 예는 다음과 같다.

const getState = useState("개똥이")
const name = getState[0];
const setName = getState[1];

name 변수는 useState("개똥이")가 반환하는 배열의 첫번째 요소, 즉 useState로 지정한 초기값인 "개똥이"가 되고, setName 변수는 state 변수인 name을 변경시킬 수 있는 setState 함수가 된다

const [ name, setName ] = useState("개똥이");

useState가 [ state 변수 초기값, setState 함수 ] 형태의 배열이기 때문에 이처럼 구조 분해 할당으로 더 간편하게 사용할 수도 있다.

props와 마찬가지로 useState의 두번째 요소인 setState 함수의 이름은 뭘로 하든 상관은 없지만 보통 지정한 변수명 앞에 set을 붙여 카멜케이스로 짓는다.

state를 변경하는 두가지 방법

기본적으로 리액트는 setState 함수만을 통해 state 변수의 값을 변경할 수 있게 되어있다. 이 setState 함수를 이용해 state 변수를 변경하는 방법은 두가지가 있다.

setName("돌쇠");

setName((current) => { return "돌쇠" });

state 변수는 setState 함수의 인자로 들어가는 값으로 변경이 된다. 따라서 setName("돌쇠") 라고 하면 name은 돌쇠가 된다.

이렇게 변경하고자 하는 값을 바로 setState의 인자로 넣어주는 방법이 있고 두번째처럼 setState의 인자로 콜백 함수를 지정하는 방법이 있는데, setState의 콜백함수는 인자로 state 변수의 현재 값을 갖게 된다. 그리고 return 으로 반환된 값으로 state 변수의 값이 변경이 된다.

따라서 setName((current) => { return "돌쇠" }); 에서 current는 state 변수의 현재 값인 "개똥이"가 되고, 콜백 함수의 리턴값인 "돌쇠"로 state 변수의 값이 변경되어 setName("돌쇠") 와 완벽하게 동일한 결과가 나온다.

두 방법의 차이

결과적으로는 완전히 동일한 동작이고 정말 둘 중 뭘 사용해도 상관이 없긴 하지만, 엄밀히 따지자면 두 방법의 차이가 존재한다.

첫번째 방법은 state 변수의 현재 값이 뭐든 그냥 setState 함수의 인자로 냅다 변경해버리는 상남자다운 방법이고, 두번째 방법은 state 변수의 현재 값을 고려한다는 것이 차이이다.

물론 위의 예시에서는 두번째 방법으로 해도 state 변수의 현재값인 current과는 상관없이 그냥 바로 return 값을 "돌쇠"로 박아버려서 의미없긴 하다.

하지만 state 변수의 현재 값이 뭔지에 따라서 바꿀 값이 달라진다거나 state 변수의 현재 값을 가지고 새로운 값을 만들어야 한다거나 뭐 이렇게 state 변수의 현재 값을 고려해야 하는 상황도 있을 수가 있기 때문에, 이런 경우에는 두번째 방법을 쓰면 된다.

아무튼 state 변수의 현재 값을 고려하느냐 아니냐의 차이인 것이고 대부분의 경우에서는 둘중 뭘 사용해도 상관없을 것이다.

리렌더링

리액트는 기본적으로 컴포넌트 내에서 유동적으로 바뀔 수 있는 값은 state 라는 애를 이용해서 저장한다.

state 파트에서 처음 한 말이다.

state 변수가 뭔지 알겠고, setState 함수로 걔를 변경하는 방법도 이제 알겠는데 그럼 왜 그냥 변수 안쓰고 굳이 state 변수를 써가지고 변경도 setState 함수를 통해서 해야하는 귀찮은 방식을 택해야 되는거임? 이라고 물을 수 있다.

리액트에서 컴포넌트 내에서 state 변수를 쓰는 이유는 리렌더링(re-rendering) 이라고 생각한다.
(물론 내 뇌피셜이다)

리액트는 state 변수가 바뀌면 자동으로 해당 컴포넌트가 리렌더링이 된다.

우리가 컴포넌트 내에서 어떠한 변수를 사용한다는건 해당 변수의 내용을 화면상에 출력하든 그 변수로 어떠한 상태를 도출해내서 그걸 화면상에 출력하든 하기 위함일 것이다. 그리고 그 변수의 값을 바꾼다는건 화면상에 출력한 변수, 혹은 어떤 상태의 값을 새로 바뀐 값 혹은 상태로 바꿔 보여주겠다는 의미일 것이다(아님 말고).

그런 관점에서 보면 리액트는 state 변수가 바뀌면 컴포넌트를 리렌더링, 즉 바뀐 변수값이 나오게 알아서 갱신해주기 때문에 이것만으로 state 변수를 사용하여 값을 관리하는건 아주 합리적이다.

state를 변경하는 두가지 방법 에서 언급했듯이 리액트는 기본적으로 state 변수의 값은 setState 함수만을 통해 변경할 수 있게 한다. 이는 state 변수의 값이 변경될 때, 즉 컴포넌트의 상태(state)가 변경될 때 리액트에게 리렌더링을 하라는 명령을 요청하기 위함이다.

다시말해, setState 함수를 이용해야 리액트가 컴포넌트의 상태가 바뀌었다라는 것을 인식할 수 있고 컴포넌트를 최신 상태로 갱신시켜준다. 그리고 그렇기때문에 setState 함수로 값을 변경해야만 하는 state 변수를 우리가 굳이굳이 사용해야 한다고 이해할 수 있겠다.

아무튼 중요한건 state 변수는 setter 함수로 값을 변경할 수 있고, state 변수의 값이 변경되면 해당 컴포넌트는 리렌더링 된다! 라는거다 👍

Object 타입의 state 변수 사용시 주의사항

state 변수가 객체라면 주의해야 할 점이 하나 있다.

const [ user, setUser ] = useState({ name: "킴민수", age: 27, job: "백수" });
setUser(current => {
  current.job = "FE 신입 개발자";
  return current;
});

user라는 state 변수를 { name: "킴민수", age: 27, job: "백수" } 라는 객체로 만들었다.
그리고 setUser의 인자로 콜백함수를 지정하는 방법을 썼다.

현재 state 변수인 객체의 job 프로퍼티를 "FE 신입 개발자"로 바꾸고 바뀐 객체를 리턴하는 함수이므로 결과적으로 setUser 함수의 인자로 job 프로퍼티가 바뀐 객체가 들어가는 꼴이니 위에서 살펴본 setState 함수의 개념대로라면 전혀 문제없어 보인다.

하지만 안타깝게도 이렇게 하면 리액트가 state의 변경을 감지하지 못해 리렌더링이 일어나지 않는다.

객체 안의 내용이 변경되었을 뿐, 객체 자체가 변경된 것이 아니기 때문이다.

좀 생소한 관점일 수 있는데 예를들면 사과, 배, 오렌지가 들어있는 상자가 하나 있고 이 상자는 내부가 보이지 않게 닫혀있다. 우리는 이 상자의 겉모습만을 볼 수 있다고 가정하자.

우리는 이 상자 안에 현재 과일별로 몇개가 들어있는지는 알고 있는 상황인데 누군가가 몰래 사과 하나를 배로 바꾸고 다시 상자를 닫아두었다고 하자.

실제로는 사과의 개수는 하나 줄고 배의 개수가 하나 늘어서 상자의 상태가 바뀐 상황인데 우리는 닫힌 상자의 겉모습만을 보고서는 이를 알아차릴 수 없다.

이처럼 리액트로 객체의 프로퍼티가 바뀌었다 해도 객체 자체가 바뀌었다는 것은 인식하지 못한다.

때문에 현재 객체를 수정하는게 아닌 아예 새로운 객체를 넣어야 리액트가 변화를 인식할 수 있다.

const [ user, setUser ] = useState({ name: "킴민수", age: 27, job: "백수" });
setUser(current => {
  const newUser = { ...current };
  newUser.job = "FE 신입 개발자";
  return newUser;
});

현재의 객체를 복사해 그와 동일한 새로운 객체를 만들고 그 객체를 변경한 뒤 걔를 setState의 인자로 넣어주어야 한다. 기존의 객체와 다른 별개의 객체가 된것이기 때문에 리액트가 변화를 인식한다.

약간 얕은복사, 깊은복사의 개념과 비슷한 거 같다. 얕복을 하면 객체의 주소값이 동일하니 객체의 변화가 기존객체, 복사한객체 모두에서 일어나고 깊복을 해서 주소값이 달라야 기존 객체와 다른 별개의 객체로 인식이 되는것처럼

리액트도 객체를 구분하는건 객체의 주소값이기 때문에 현재 객체의 내용을 바꿔봤자 그 객체 고유의 주소값은 변하지 않으니 그 객체 자체는 그대로인 것으로 인식이 되는것 같다고 멋대로 납득해버렸다.

그래서 위의 예시에서도 newUser = current 라고 하지 않고 spread 연산자를 통해 깊복을 해준것이 아닌가! newUser = current 라고 하면 아마 똑같이 안될거다.
(spread 연산자는 1차원 깊이인 객체(배열)는 깊은복사를 해준다고 알고있음)

암튼 객체 상태의 state를 사용할땐 이 점을 주의하도록 하자 ✅

참고자료

https://reactjs-kr.firebaseapp.com/docs/components-and-props.html
https://onlyfor-me-blog.tistory.com/463#google_vignette
https://yung-developer.tistory.com/96