[React] state,props

M_yeon·2022년 9월 17일

React

목록 보기

9/23

state 종류에는 기본적으로 3가지가 있습니다.

state, setState, useState
뒤에서 state prev, state Lifting에 대해서 한번 더 벨로그를 쓸거라서 오늘은 state는 위 3가지에 대해서만 서술하겠습니다!

state: 컴포넌트에서 사용하는 변수(state)
setState: 컴포넌트에서 사용하는 변수(state)를 바꿔주는 기능
useState: 컴포넌트에서 사용하는 변수(state)를 만들어주는 기능

{ state, setState, useState } 언제 사용하나요?

회원가입, 게시물작성 내용 등을 서버컴퓨터에 전송하기위해 변수에 담아둘 때 사용합니다.

작성한 내용을 검증하고 잘못된 부분을 빨간색으로 표기할 때 사용합니다.

state

state란 리액트 컴포넌트에서 데이터를 담기 위한 상자입니다.
우리는 자바스크립트에서 데이터를 담기 위한 상자로 변수를 배웠습니다.
다시 말해, state는 컴포넌트에서 사용하는 변수입니다.

setState

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다.

setState 는 이벤트 핸들러 내에서 비동기적입니다.
이로 인해 부모와 자식이 모두 click 이벤트에서 setState를 호출한다면 자식은 두 번 렌더링되지 않습니다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트합니다. 이는 더 큰 규모의 앱에서 뚜렷한 성능 향상을 만들어냅니다.

useState

useState는 React의 Hook입니다.

Hook이란? Hook은 특별한 함수입니다. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다!

useState는 무엇을 반환할까요?
state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다.
이것이 바로 const [count, setCount] = useState()라고 쓰는 이유입니다.

state와 props의 차이점은 무엇인가요?

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

state 리렌더

리액트가 리렌더하는 방식

setstate는 비동기로 작동 합니다.

setState가 동기로 작동하게되면 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율 적입니다.

따라서 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링합니다

리렌더가 되는 상황

새로운 props가 들어올 때

부모 컴포넌트가 렌더링 될 때

강제 업데이트(forceUpdate)가 실행될 때

state가 변경될 때

props

props 란?

상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)
프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어지게 됩니다.
이를 props가 연결해주게 되며, props란 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수/함수 를 의미합니다.
부모 컴포넌트가 props를 물려줄때는 객체로 묶어서 넘기게 됩니다.

이렇게 앞에 props.~~~ 을 적어줘야 하는데 만약 위에 container부분에서 함수 state가 아닌 data 자체, 객체를 넘겨줘야 한다면
구조분해할당으로 받아야 하는데

이렇게 객체 {} 를 열어서 일일히 presenter 영역에 하나하나 써줘야 한다 ...props는 이 외에 전달받은 다른것들도 가져오겠다는 뜻.
props를 이용하면 style 시트에서 동적으로 버튼 색깔이 바뀐다던지 css까지 조절할 수 있는데

import { useState } from 'react';
import { Test } from '../../src/test2';

export default function Test2() {
	const [isTrue, setIsTrue] = useState(false);

	const handleOnClick = () => {
		setIsTrue((prev) => !prev);
	};

	return (
		<>
			<Test onClick={handleOnClick}>클릭하면 색이 왔다 갔다</Test>
		</>
	);
}


import styled from '@emotion/styled';

export const Test = styled.div`
	color: red;
`;