state & props

sohyeon kim·2022년 3월 24일

React & Javascript

목록 보기

19/41

리액트 컴포넌트에서 다루는 데이터는 두개로 나뉜다.
그것은 바로 props와 state 이다.

props”는 “properties”의 약자이다. state는 일반적인 자바스크립트의 객체를 의미한다. 두가지 모두 컴포넌트에 정보를 관리한다는 공통점이 있으며, 가장 큰 차이점은 props는 호출받고 코드가 읽혀지는 시점에서 값이 고정되고, state는 컴포넌트 안에서 자유롭게 값의 변화가 이루어진다.

props

컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어지게 된다. 이때 props가 연결해주며, props는 부모 컴포넌트가 가지고 있는 변수, 함수를 자식 컴포넌트에게 주는 값이다.

자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정 할 수는 없다. 부모 컴포넌트가 props로 물려줄때는 객체로 묶어서 넘겨준다.

/*부모 컴포넌트 _ container 부분 > props 내려주기 */

const BoardWrite = ()=>{
		const [writer, setWriter ] = useState()
		const handlechangeWriter = (e)=>{
					writer = e.target.value
					setWriter(writer)
						}

	return(
		// 자식 컴포넌트 _ presenter 컴포넌트 
		// 본격적으로 props를 내려주는 부분
      	// props = { propsName : handlechangeWriter } 형태의 객체로 넘긴다.
      // 여러개 넘길 수 있음.
		<BoardWriteUI propsName={handlechangeWriter}/>
	)
}


/*자식 컴포넌트 _ presenter 부분 > props 받아오기 */
//파라미터 부분에 props를 적어주셔야 받아 올 수 있다.
const BoardWriteUI = (props)=>{
		return(
			<Wrapper>
				<Writer
					type = "text"
					placeholder = "작성자를 적어주세요"
					// 본격적으로 props를 내려받는 부분
					onChange = {props.propsName}
					/>
			</Wrapper>
		)
}

props는 객체로 넘어오기 때문에 받아온 props를 사용하려면 객체의 속성을 꺼내오는 것 처럼 props.propsName 형태로 사용해야 한다.

단방향 데이터 흐름

리액트는 데이터 흐름이 단방향 구조이다. 단방향이라는 것은 props가 부모에서 자식으로만 흐른다는 것 이다. 물론 나중에 상태관리 라이브러리를 사용하면 우회하는 방법은 있지만 기본적으로는 부모에서 자식으로만 흐른다.

리액트의 데이터 흐름이 단방향 구조이기때문에 우리가 에러를 캐치하기가 더 쉽고, 보기에 더 깔끔하다.

state

state, setState, useState

리액트 컴포넌트에서 데이터를 담기 위한 변수이다.
변화가 필요할 경우 setState()함수를 통해 값을 변경해 줄 수 있다. 유동적인 데이터를 사용할 때 state를 사용한다.

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

const[state, setState] = useState("*")
const[변수명, 변수바꾸는기능] = 변수만드는기능(담을내용)

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

const [classmate, setClassmate] = useState("철수")
setClassmate("영희")     // classmate 가 영희로 바뀐다.