[React] React State & Props

1.state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
2.React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
3.React 컴포넌트(React Component)에 props를 전달할 수 있다.
4.이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
5.실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
6.실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
7.React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.
8.JSX 문법의 기본과 컴포넌트 기반 개발에 대해서 숙지한다.
9.React Router DOM으로 React에서 SPA(Single-Page Application)을 구현할 수 있다.
10.state hook을 이용하여, 컴포넌트에서 데이터를 변화시킬 수 있다.
11.props를 이용하여, 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 수 있다.
12.바람직한 컴포넌트 구조와 state와 props의 위치에 대해 고민한다.

1.state와 props에 대해서 이해하고 있으며 작성한 예시를 보유하고 있고 그 예시를 보며 응용해서 작성할 수 있다.

2.useState를 사용해서 현재 상태, 변경함수, 디폴트값을 만들 수 있다.
const [showPopup, setShowPopup] = useState(false); 이 함수에서 첫번째 showPopup 변수이며 useState를 통해 false라는 값이 default로 배정되어있고 setShowPopup()를 사용해 showPopup라는 변수의 값을 변경해줄 수 있다.


3.아래의 예시에서 볼 수 있지만 원하는 컴포넌트에 특정 props값을 넣어준 후 자식함수에서 그 값을 매개변수로 넣어주는 방식으로 호출할 수 있다.
const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      <Learn a = {itemOne} b ={itemTwo}/>
    </div>
  );
};

const Learn = (props) => {
  return <div className="Learn"> {props.a} {props.b} </div>;
};

export default App;


4.이벤트 핸들러 함수는 사실 위에서 대답한 set State와 관련있는데 특정 이벤트를 받게되면 이벤트 핸들러 함수의 내부에 setX()를 넣어줘서 state값을 변경해주거나 map, filter 등의 조작을 통해 반응을 만드는 방식이다.

5.props는 변경되지 않는 값들로 건축물의 위치, 주소, 기원 등에 적용된다면 state는 현재 건물의 수명?, 안전점검시기, 평당 단가 등의 변경될 수 있는 값들에 넣어줘야 한다. 변경이 가능하거나 변경해야 하는 내용들은 state로 넣어주는 편이 좋다. (하지만 state를 남발하면 데이터 낭비가 있다는 것 같기도 하다)

6.아직은 부족하다고 생각되는데 아마 질문의 의도는 데이터는 아래로 흐르기 때문에 아래에서 변경을 해서 상위함수? 컴포넌트?에 적용시키고 싶은 경우 상위에 만들고 그걸 아래에서 받아서 데이터를 위로 전달하는 상태 끌어올리기등을 원하는 것 같다. 하지만 그건 다음주에 배울 예정이다. (미리 잠깐 본 상태)

 

질문은 12까지 있지만 6까지 한 이유는 아무래도 내일까지 진행되는 내용의 회고이기도 하고

오늘 다 대답할 수 있겠지만 시간이 너무 늦어서 수면시간 보장을 위해 반으로 나눈 것도 있다.

다른 회고의 경우 2~3일에 걸쳐서 한다고 해도 한 내용까지만 잘라서 하는 경우가 많았는데

오늘과 내일 모두 state & props를 진행하고 학습은 이미 오늘 끝내고 내일은 과제만 진행하기 때문에 나누기도 애매했다.

 

내일 한다고 해도 이상하지 않은 회고를 잠도 못자가며(다래끼 때문에 수면에 민감하다) 오늘 마감하는 것 보다는

반으로 나누고 오늘 예정되있던 10분운동을 마무리 하고 수면을 취하는 편이 더 좋다고 생각된다.

 

state는 좋은 기능인 것 같다.