1주차 질답

[choisohyun]

목차명	질문	답변
1주차	1 @choisohyun	7 @jisunchung
1주차	3 @hamo-o	1 @choisohyun
1주차	7 @jisunchung	3 @hamo-o
1주차	5 @RAINBOWJYP	4 @JoyJaewon
1주차	6 @blan19	5 @RAINBOWJYP
1주차	4 @JoyJaewon	6 @blan19

[JoyJaewon]

4번 질문

1. 첫번째 코드는 리렌더링이 되고 두번째 코드는 리렌더링이 되지 않습니다. 이유를 설명해주세요.

   const Component = () => {
   	const [state, setState] = useState({ count: 0 });
   	
   	return(
   		<button onClick = {() => setState({ count: 1 })}>{state.count}</button>
   	);
   };

   const Component = () => {
   	const [count, setCount] = useState(0);
   	
   	return(
   		<button onClick = {() => setCount(count + 1)}>{count}</button>
   	);
   };

2. 이 책에서 전역상태를 사용하는 두가지 경우를 제시하고있습니다. 그 두가지 경우를 간단히 설명해주세요.

[blan19]

A1.

첫번째 코드는 계속해서 새로운 객체를 반환하고 있기 때문에 리렌더링이 계속 일어납니다.

두번째 코드는 원싯값을 가지는 상태이고, count + 1로 새로운 원싯값을 리턴함으로서 리렌더링이 발생합니다

A2.

• 리액트 외부의 상태에 의존하고 있는 경우
• props로 상태를 공유하기에 번거로운 경우

[JoyJaewon]

헉 제가 두번째 코드랑 문제를 잘못 작성했엇네요ㅠㅠ
<button onClick={()=>setCount(1)}> 로 해서 두번째부터 베일아웃 적용되서 리렌더링이 발생하지 않는다라고 하려고 했었습니당..! 리렌더링 안된다고 적어놔서 헷갈리셨을텐데 죄송합니당 ㅠㅠ

[choisohyun]

1번

1. useState를 이용해 useReducer를 '거의' 대체할 수 있다고 합니다. useState로 useReducer를 구현할 때 차이점은 무엇이 있을까요?
2. 지연 초기화(lazy evaluation)는 어떤 기능인가요?

[jisunchung]

A1 .
useReducer에서는 reducer와 init을 훅이나 컴포넌트 외부에서 정의할 수 있기 때문에 인라인 함수가 없는 반면, useState에서는 reducer와 init을 정의하는 두개의 인라인 함수가 필요합니다.

A2 .
컴포넌트 상태의 초기값 계산이 복잡하거나 무거운 경우 지연 초기화를 사용하면 최초 렌더링 시에만 실행되기 때문에 성능을 최적화 할 수 있습니다.
useState와 useReducer에서 모두 적용할 수 있습니다.

[blan19]

6번 질문

Q. 지역 상태를 효과적으로 사용하는 방법 중에서 불필요한 리렌더링을 방지하기 위해 어떤 방법을 사용할 수 있을까요?

const Parent = () => {
	const [count, setCount] = useState(0);
	
	return(
            <>
               <Child1 count={count} />
                <NoEffect />
            </>
	);
};

[RAINBOWJYP]

A. 리렌더링 방지를 위해 지역 상태를 Child1 컴포넌트 내에서 관리하도록 할 수 있습니다.

const Parent = () => {
	return(
            <>
               <Child1 />
               <NoEffect />
            </>
	);
};

const Child1 = () => {
	const [count, setCount] = useState(0);

	return (
                      {count를 이용한 로직}
	);
};

지역상태값이 변경되어 Child1 컴포넌트가 리렌더링되어도 NoEffect 컴포넌트는 리렌더링이 되지 않습니다.

[hamo-o]

3번 질문

아래 코드에서, 버튼을 빠르게 두 번 클릭했을 때 1번 코드와 2번 코드의 동작에서의 차이와, 그 이유를 말씀해주세요.

   // 어떤 컴포넌트 내부

    const [count, setCount] = useState(0);
     
    const handleClickAddCount = () => {
        // 1번
        setCount((count) => count + 1);

        // 2번
        setCount(() => count + 1);
    };

    return <button onClick={handleClickAddCount}>버튼</button>;

[choisohyun]

2번은 버튼을 두 번 빠르게 클릭해도 한 번만 증가합니다. (그런데 setCount(() => count + 1))과 setCount(count + 1)이 동일한 동작일까요? 🤔 -> 해봤는데 동일하군요 이전 값을 사용할 때만 업데이트가 되나보네요)
새로운 값으로 상태가 업데이트되지 않았는데 다시 상태를 업데이트하려고 하면 이전 상태에서 +1한 것이 됩니다.

1번은 갱신 함수로 호출되면서 실제로 버튼을 클릭한 횟수를 세게 됩니다. 이전 값을 기반으로 하기 때문에 업데이트를 계속해서 한 상태로 볼 수 있습니다.
단, setCount(c => c)와 같은 형태는 같은 값을 리턴한 것이므로 리렌더링이 되지 않습니다.

[RAINBOWJYP]

5번

Q1. 지역 상태를 언제 사용해서는 안될까요?

Q2. 다음 예제에서 버튼을 클릭하면 화면상에 변화가 없는 이유가 무엇일까요?

const Component = () => {
    const [state, setState] = useState({count: 0})

    return <div>
        <button onClick={() => setState({count:1})}>
            {state.count}
        </button>
    </div>
}

[JoyJaewon]

1. prop을 전달하는것이 적절하지 않을때, 이미 리액트 외부에 상태가 있을때(ex.비동기 데이터) 지역상태 대신 전역상태를 사용합니다.

• 새로운 객체{ count:1 } 가 이전 객체와 동일하지 않기 때문에 컴포넌트는 리렌더링 됩니다.
• 하지만 버튼 클릭후 카운트가 변경되지 않았기때문에 화면상으로는 변화가 없습니다.

[jisunchung]

7번 질문

1. 아래 코드를 보고 지연 초기화에 대해서 설명해주세요.

const init = () => 0;

const Component = () => {
	const [count, setCount] = useState(init);
		
	return (
		<div>
			{count}
			<button onClick={(c) => setCount(c + 1)}>
				Increment Count
			</button>
		</div>
	);
};

2. 지역상태와 전역상태에 대해서 설명해주세요.

[hamo-o]

1.

init 함수는 컴포넌트가 마운트 될 때, 딱 한번만 호출됩니다. (무거운 연산을 가질 때 유용하게 사용할 수 있습니다.)
즉 useState가 호출되기 전까지, init은 불리지 않다가, useState 호출 순간(느리게) 계산되어 초기화 값을 넘겨줍니다.

2.

지역 상태란?

• 하나의 컴포넌트에 속하고 컴포넌트에 의해 캡슐화된 상태

전역 상태란?

• 지역 상태가 아닌 것.
• 싱글톤 (특정 컨텍스트에서 상태가 하나의 값만을 가짐. 즉 메모리에 하나의 값으로 존재.)
• 공유 상태 (상태 값이 다른 컴포넌트 간에 공유됨. JS 메모리상 단일값을 말한 것은 아님.)