[React] State ,Props

State

state 는 각 컴포넌트의 최상단에 return 구문 이전에 선언되는 상태 저장 변수 이다.

state 를 변경하기 위해서는 꼭 setState 함수를 사용해서 값을 바꿔줘야한다.

만약 setState 를 통하지 않고 직접 DOM 요소에 접근해서 변경한 경우
페이지가 렌더링되지 않는다.

• 예를 들어서 설명하자면

  • 어떤 버튼이 평소에 비활성화 되어있는 상태이다.
    
    
  • 해당 버튼의 disabled 와 className 은
    isDisable 이라는 state 에 의해서 실시간으로 변경된다.
    
    
  • state 가 setState에 의해서 변경되면 해당 변경으로 인해 페이지의 달라진 부분을
    React 내부의 Virture DOM 이 인식하여 최소한의 처리로 렌더링한다.
    
    
  • querySelector 또는 getElement 등의 DOM 요소에 직접 접근하여
    수정하는 방식을 취하면 setState 를 통해서 변경되지 않았기 때문에 렌더링과정이 실행되지 않는다.
    그렇게되면 실제 state 값은 바뀌었지만 그로인해 바뀐 페이지의 특정 부분이 새로 렌더링되지
    않기때문에 결국 실시간으로 반영될 수 없다.
    
    
  • 즉 DOM 에 직접 접근하는 것이 아닌,
    setState 를 통해서 state 의 값을 다시 설정하는 방식을 거쳐야만
    버튼의 disabled 와 className 이 실시간으로 변경된다는 것이다.

---

Props

props 는 자식 컴포넌트에게 전달해주는 값입니다.

/* 부모 컴포넌트에서 ChildComponent에 props를 넘겨주며 호출 */
return(
	<>
		<ChildComponent text={"님 안녕하세요"} name={"홍길동"} />
  	</>
)

/* 자식 컴포넌트는 받아온 props를 이용해서 리턴 */

const ChildComponent = (props) => {
	return(
    	<h1>{props.name}{props.text}</h1>  // 홍길동님 안녕하세요
    )
}

props 를 자식 컴포넌트에 넘겨줄 때는 객체형태를 이용합니다.

props 라는 객체에 name , text 라는 이름의 key 가 있고
name : "홍길동" text : "님 안녕하세요" 이런식으로
key , value 형태를 가지고 있는 것입니다.

---

State 와 Props 의 차이점, 정리

State 는 컴포넌트 내부의 최상단에 선언됩니다
그리고 선언된 컴포넌트 내에서만 사용됩니다.

State 는 setState 함수를 이용해서 저장된 상태를 갱신하고
그로 인해서 변경된 부분의 페이지를 새로 렌더링 할 수 있습니다.

---

Props 는 부모 컴포넌트에서 선언됩니다.
그리고 자식 컴포넌트가 해당 props 를 사용합니다.

Props 는 자식 컴포넌트에서 수정하거나 훼손할 수 없습니다.