[스터디] Managing State - 1

https://react.dev/learn/managing-state

Reacting to input with state

1

https://react.dev/learn/reacting-to-input-with-state

https://react.dev/learn/reacting-to-input-with-state#how-declarative-ui-compares-to-imperative

https://react.dev/learn/reacting-to-input-with-state#thinking-about-ui-declaratively

https://react.dev/learn/reacting-to-input-with-state#step-1-identify-your-components-different-visual-states

state machine 들어보신 분..?

 

https://react.dev/learn/reacting-to-input-with-state#step-2-determine-what-triggers-those-state-changes

https://react.dev/learn/reacting-to-input-with-state#step-3-represent-the-state-in-memory-with-usestate

https://react.dev/learn/reacting-to-input-with-state#step-4-remove-any-non-essential-state-variables

https://react.dev/learn/reacting-to-input-with-state#eliminating-impossible-states-with-a-reducer

의 'Reducers let you unify multiple state variables into a single object and consolidate all the related logic!' 부분.. 리듀서의 역할이구나!

https://react.dev/learn/reacting-to-input-with-state#step-5-connect-the-event-handlers-to-set-state

https://react.dev/learn/reacting-to-input-with-state#recap

• Declarative programming means describing the UI for each visual state rather than micromanaging the UI (imperative). 서술형, 명령형이라는 말이 잘 와닿지 않았는데 micromanaging이라고 하니 확실히 알겠다.

 

Choosing the state structure

https://react.dev/learn/choosing-the-state-structure

https://react.dev/learn/choosing-the-state-structure#principles-for-structuring-state

https://react.dev/learn/choosing-the-state-structure#don-t-mirror-props-in-state

if the parent component passes a different value of messageColor later (for example, 'red' instead of 'blue'), the color state variable would not be updated!
The state is only initialized during the first render.

우연의 일치지만 이렇게 사용해본적은 없었다. 그래서 진짜 업데이트가 안되나 하고 해보니 정말 안된다... 직접 해보기 전엔 부모 컴포넌트에서 state 변경했으니까 부모 컴포넌트 다시 렌더링 될거고 그러면 자식도 다시 렌더링 되니까 업데이트 되지 않을까?. 생각했는데... setState 부분 다시 읽어봐야겟다...ㅜㅜ

 

import * as React from 'react';
import './style.css';

export default function App() {
  const [color, setColor] = React.useState('red');

  React.useEffect(() => {
    console.log('render in parent!');
  }, []);
  
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <button
        onClick={() => {
          setColor('blue');
        }}
      >
        toggle
      </button>
      <div>color in parent: {color}</div>
      <Message messageColor={color} />
    </div>
  );
}

function Message({ messageColor }) {
  const [color, setColor] = React.useState(messageColor);
  return (
    <div>
      <div>-------------------------</div>
      <div>this is Message component!</div>
      <div>color: {color}</div>
    </div>
  );
}

“Mirroring” props into state only makes sense when you
want
to ignore all updates for a specific prop.

한편 prop을 state에 그대로 내려받아 일부러 사용하는 경우도 있구나 싶어서 신기했따.

 

https://react.dev/learn/choosing-the-state-structure#avoid-duplication-in-state

https://react.dev/learn/choosing-the-state-structure#avoid-deeply-nested-state

 

Here is an example of how you could go about it:

<PlaceTree /> 안에서 또 PlaceTree를 리턴 ... 이게 바로,, 재귀?

 

 

 

https://react.dev/learn/choosing-the-state-structure#improving-memory-usage

 

 

 

 

Sharing State Between Components

https://react.dev/learn/sharing-state-between-components

https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components

https://react.dev/learn/sharing-state-between-components#a-single-source-of-truth-for-each-state