React_State, Props

React

 

 

 

 

State

 

📌 State란?

• 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다.
• 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.
• State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링한다.

 

 

 

 

📌 State를 변경하기

 

State 값을 변경하기 위해서는 반드시 setState 함수를 이용한다.

setState 함수를 호출할 때 다시 렌더링 해달라는 명령을 내린다.

const App = () => {
    const [value, setValue] = useState(초기값);
    return ~
}

 

 

 

 

 

📌 State를 변경하는 방법 

 

// 1. setState 내에 변경할 값을 넣는다.
const [count, setCount] = useState(0);
setCount(count + 1);
 
// 2. setState에 함수를 넣는다.
const [count, setCount] = useState(0);
 
setCount((current) => {
    return current + 1
})

함수를 넣는 경우 함수가 반환하는 값으로 State가 변경된다.

현재 값을 기반으로 State를 변경하고자 하는 경우 함수를 넣는 방법(두번째) 방법을 권장한다.

 

 

 

---

 

 

 

 

📌 Props란?

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

 

 

 

📌 Props 사용

 

• App.js에 name이라는 props를 "minjeong" 이라는 값으로 넘겨준다.
• GetName.js에서 name을 props.name으로 사용해서 화면에 "hi, minjeong"이 출력된다.

 

 

App.js

import React from 'react';
import GetName from "../src/features/counter/GetName.js"

function App() {
  return (
    <div className="App">
      <Reset />
      <GetName name="minjeong" />
    </div>
  );
}

export default App;

 

 

 

GetName.js

import React from 'react'

function GetName(props) {
    return <h1>hi, {props.name}</h1>;
  }
  

export default GetName;

 

또는 객체에서 값을 추출하는, 비구조화 할당으로 간결하게 작성 가능하다.

import React from 'react'

function GetName({props}) {
	// props.name을 비구조화 할당으로 name으로 줄였음!
    return <h1>hi, {name}</h1>;
  }
  

export default GetName;