React | State와 Props 데이터 관리

State (상태)

특정 React 컴포넌트 안에서 사용하는 데이터 (변경가능)

class MyComponent extends Component {
  state = {상태이름:상태값}
  
  componentMethod = () => {
    this.setState({상태이름 :새로운 상태값})
  }
  render(){
    return (표시할 요소, 컴포넌트)
  }
}

function MyComponent(){
  const[상태, 상태변경함수] = useState(상태값)
  const componentMethod = () => {
    상태변경함수(새로운 상태값)
  }
  return(표시할 요소, 컴포넌트)
}

 

상태 변경 함수를 사용하지 않으면, React는 상태 변경을 감지하지 못한다 

 

쓸대없이 화면 업데이트하는 것을 막기위해 상태변경을 통해서만 업데이트 가능하게 만들었고 

그 결과 상태변경을 감지하고 화면을 업데이트하는 방식이 리액트의 가장 기본적인 작동 방식이 됨

 

대표적인 SPA라이브러리 => 리액트

 

상태 변경 함수 실행

상태 변경인지

변경된 상태를 사용하는 컴포넌트만 업데이트

 

react의 spa 구현 방법

상태변경 -> 리 렌더링

Props

부모 컴포넌트에게 전달받은 데이터 (변경 불가능)

<자식 컴포넌트 props 이름 = {props}/>

constructor(props){
  super(props)
}
props.props이름

// or

this.props.props이름

function 자식컴포넌트({props이름}) {
}

 

상태 끌어올리기

부모의 상태를 변경하고 싶으면 어떻게 해야하는가

-> 상태 변경 함수를 props로 받아와서 사용 - 상태 끌어올리기

 

React의 상태 변경

1. 상태 변경 함수를 사용해야 함
2. 새로운 상태 값이 기존 상태 값과 달라야 함 === React의 불변성을 지켜야 함

새로운 상태 값이 기존 상태 값과 다르다는 것을 어떻게 판단하는가

-> Js에서 사용하는 데이터 타입에 따라 달라짐

 

새로운 상태 값 === 기존 상태값 -> False 두개의 상태값이 다르다 판단하고 업데이트

 

자료형 종류별 특징

원시 자료형 (Primitive Data Type) - 불변하는 단순한 데이터 변수에 값 자체를 저장

Ex) 

문자열 = "안녕하세요"

숫자 = 3.14159

 

참조 자료형 (Reference Data Type) - 가변하는 복잡한 데이터 변수에 메모리 주소를 저장

Ex)

배열 = [1,2,3]

객체 = {사과 : 🍎, 바나나:🍌}

 

 

기존 상태를 재사용하면서 주소 값을 바꾸려면?

1.  기존 상태를 복사해서 가공한다
   • Spread Syntax [...]
   • Array.slice()
   • Object.assign()
2. 새로운 배열을 리턴하는 고차 함수 메서드 사용
   • Array.map()
   • Array.filter()