4주차 질답

[choisohyun]

목차명	질문	답변
4	3 @im-na0	1 @choisohyun
	4 @hamo-o	2 @whewchews
	6 @RAINBOWJYP	5 @jisunchung
	1 @choisohyun	3 @im-na0
	5 @jisunchung	4 @hamo-o
	2 @whewchews	6 @RAINBOWJYP

[jisunchung]

5번 문제

1. 아래 코드는 jotai를 활용한 예제코드에서 personAtom을 이용한 컴포넌트입니다.
   이 코드는 ageAtom이 변경되면 불필요한 리렌더링이 발생합니다.
   리렌더링을 피하기 위해 필요한 값만 포함하는 fullNameAtom이라는 파생 아톰을 만들어주세요.

const personAtom = atom((get) => ({
    firstName : get(firstNameAtom),
    lastName : get(lastNameAtom),
    age : get(ageAtom)
}))

const PersonComponent = () => {
    const person = useAtom(personAtom)
    return <>{person.firstName} {person.lastName}</>
}

2. 자바스트립트의 proxy객체에 대해서 설명해주세요.

[hamo-o]

const fullNameAtom = atom((get) => ({
	firstName: get(firstNameAtom),
	lastName: get(lastNameAtom),
}));

Proxy는 특정 객체를 감싸 객체의 속성을 읽기, 쓰기하는 등의 작업을 중간에서 가로채는 객체입니다.
가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 합니다.

const proxy = new Proxy(target, handler)

target – 감싸게 될 객체
handler – 동작을 가로채는 메서드가 담긴 객체

const target = {};
const proxy = new Proxy(target, {});

proxy.test = 5;
alert(target.test); // 이러면 프록시 객체의 프로퍼티만을 변경했는데 타겟객체의 프로퍼티가 변경된 것을 확인할 수 있습니다.

[choisohyun]

1번 문제

Q. jotai에서 const countAtom = atom(0), 원시 아톰인 countAtom을 가지고 저장된 값에 접근하는 방식을 설명해 주세요.

[im-na0]

저장된 값을 가져오는 방법이라 이해했습니다

1. useAtom 훅을 사용해서 상태 읽고 쓰는 방법
2. get 함수를 사용하여 아톰의 현재 값을 직접 가져오는 방법

질문을 잘못이해했다면 알려주세용 ㅎㅎ

[im-na0]

3번문제

1-1

아래 코드는 React.memo로 메모이제이션된 컴포넌트의 props로 Valtio의 상태(proxy 객체에서 snapshot으로 가져온 값)를 통째로 전달하고 있습니다.
이로 인해 React.memo가 의도한 대로 최적화되지 않을 가능성이 있습니다.
올바르게 동작하도록 코드를 수정해주세요.

const MemoedTodoItem = memo(TodoItem);

const TodoList = () => {
  const { todos } = useSnapshot(state);
  return (
    <div>
      {todos.map(todo => (
        <MemoedTodoItem key={todo.id} todo={todo} /> // 객체를 통째로 전달하고 있음
      ))}
    </div>
  );
};

const TodoItem = ({ todo }) => {
  return (
    <div>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => toggleTodo(todo.id)}
      />
      <span style={{ textDecoration: todo.done ? "line-through" : "none" }}>
        {todo.title}
      </span>
      <button onClick={() => removeTodo(todo.id)}>Delete</button>
    </div>
  );
};

const MemoedTodoItem = memo(TodoItem);

1-2 (옵션)

위 코드에서 Valtio의 proxy와 snapshot의 동작 방식 때문에 React.memo가 정상적으로 동작하지 않는 이유를 설명해주세요.

[choisohyun]

1-1 TodoList까지 리렌더링이 발생할 수 있습니다. id값만 전달하고 TodoItem 내부에서 찾아서 사용하면 리렌더링을 최적화할 수 있습니다.

const state = proxy({ todos: [] })

const MemoedTodoItem = memo(TodoItem);

const TodoList = () => {
  const { todos } = useSnapshot(state);
  return (
    <div>
      {todos.map(todo => (
        <MemoedTodoItem key={todo.id} todoId={todo.id} /> 
      ))}
    </div>
  );
};

const TodoItem = ({ todoId }) => {
  const todoState = state.todos.find(({ id }) => id === todoId)
  const todo = useSnapshot(todoState)

  return (
    <div>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => toggleTodo(todo.id)}
      />
      <span style={{ textDecoration: todo.done ? "line-through" : "none" }}>
        {todo.title}
      </span>
      <button onClick={() => removeTodo(todo.id)}>Delete</button>
    </div>
  );
};

const MemoedTodoItem = memo(TodoItem);

1-2. proxy는 객체 변경을 감지하는 프락시 객체를 만들 수 있고 snapshot은 불변 객체로 생성이 됩니다. 객체의 전체를 가져와서 쓰게 되면 일부만 변경되더라도 변경된 것으로 감지하고 리렌더링이 발생하게 됩니다.

[im-na0]

💯

[RAINBOWJYP]

6번 문제

Q1. 카운트 버튼을 누르면 값이 1 오르는 컴포넌트가 2개가 있고 countAtom은 1개가 있습니다. Provider라는 Jotai 컴포넌트를 이용하여 <App />와 <Counter1 />, <Counter2 />를 완성시켜주세요.

const countAtom = atom(0);

const App = () => {
  return (
    <div>
      // App을 완성시켜주세요.
    </div>
  );
};

const Counter1 = () => {
  return (
    <div>
      <h2>Counter 1</h2>
    </div>
  );
};

const Counter2 = () => {
  return (
    <div>
      <h2>Counter 2</h2>
    </div>
  );
};

export default App;

[jisunchung]

import {atom, useAtom, Provider} from "jotai"

const countAtom = atom(0)

const App = () => {
    return (
        <>
        <Provider>
        <div><Counter1/></div>
        <div><Counter2/></div>
        </Provider>
        </>
    )
}

const Counter1 = () => {
    const [count, setCount ] = useAtom(countAtom)
    const inc = () => setCount((c) => c+1)
    return <>{count} <button onClick={inc}>+1</button></>
}

const Counter2 = () => {
    const [count, setCount ] = useAtom(countAtom)
    const inc = () => setCount((c) => c+1)
    return <>{count} <button onClick={inc}>+1</button></>
}

[whewchews]

2번 문제

1. 리액트는 불변성을 유지하는 방식으로 상태를 업데이트 하도록 합니다. useState나 useReducer 등의 hook을 사용해 상태를 업데이트 할 때 개발자는 불변성을 유지하는 방식으로 코드를 작성해야 합니다.
   리액트에서 개발자가 불변성을 유지하는 방식으로 코드를 작성하지 않으면 어떤 일이 생길까요?

2. 리액트 컴포넌트 내부에서 다음과 같은 코드를 작성했다고 했을 때, 발생 가능한 문제점에 대해 작성하고,
   increment 함수를 리액트 상태 업데이트 방식으로 수정해주세요.

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

const increment = () => {
  state.count += 1;
  setState(state); 
};

3. 아래 보기의 JavaScript의 Array.prototype 메서드 중 리액트에서 배열로 된 상태를 업데이트 할 때,
   (1) 불변성을 유지하는 메서드와 (2) 불변성을 깨는 메서드를 구분해주세요.

• 보기: map / filter / sort / reduce / slice / splice / concat / push / pop / shift / unshift / reverse / spread 연산자(...)

4. (선택 질문) 리액트는 왜 이렇게 신경써줘야 하는게 많은 불변 상태 관리 방법을 선택하고 있을까요?

[RAINBOWJYP]

1. 리액트는 객체나 배열의 요소를 직접 수정하면 해당 상태가 변경되었다고 인식하지 못하고 컴포넌트가 리렌더링되지 않습니다. UI가 최신 상태로 보이지 않게 되는 문제가 있습니다.
2. state.count += 1로 상태를 직접 수정하고 있어서 상태 변경을 인식하지 못할 수 있습니다.

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

const increment = () => {
  setState((prev)=>({...prev, count:prev.count + 1})); 
};

3. (1) 배열을 불변 상태로 업데이트 할 수 있는 메서드 === 원본 배열을 변경하지 않는 메서드
   map, filter, sort, reduce, slice, concat, spread
   (2) 할 수 없는 메서드 === 원본 배열을 변경하는 메서드
   splice, push, pop, shift, unshift, reverse
   4.는 이따가 올릴게요.

질문 재밌었어요~~ slice랑 splice는 아직도 헷갈려요...

[im-na0]

4. 제 생각에는 리액트가 리렌더를 감지하는 방식이 객체비교(is)를 통해서 결정하기 때문이라고 생각했어요..!

[whewchews]

@RAINBOWJYP

1. 핵심을 담아 잘 설명해주셨네요 👍
   리렌더링 이슈를 설명해주셨는데, 조금 더 자세하게 리액트의 상태 비교할 때 사용하는 방식에 대한 추가 설명이 있으면 좋을 것 같아요!
   ex) React는 상태 변경을 비교할 때 Object.is 비교를 사용하는데, 객체나 배열을 직접 수정하면 React는 이전 상태와 새로운 상태가 동일하다고 판단할 수 있습니다.
2. 👍 👍
3. 원본 배열을 여부를 잘 구분해주셨는데, Array.prototype.sort()는 원본 배열을 직접 수정하는 메서드입니다!
   sort()의 원본 배열 수정을 피하는 대체 방법으로, 배열을 spread 연산자로 복사하거나([...array].sort()), slice로 얕은 복사한 새 배열을 만들고 정렬하거나(array.slice().sort()), ES2023에서 나온 새로운 문법 Array.toSorted()을 알고 있으면 좋습니다.
4. (답변 기다리고 있을게요!🙌)

[hamo-o]

4번 문제

Jotai에서 atom()의 첫 번째와 두 번째 인수는 무엇이고, 어떻게 동작하나요? 원시 아톰과 파생 아톰 키워드를 이용해서 설명해주세요.

[whewchews]

초기값만 받은 atom은 원시 아톰으로, 값 또는 갱신 함수로 변경할 수 있는 값을 가집니다.

const nameAtom = atom('sun')
const jobAtom = atom('frontend')

원시 아톰을 기반으로 파생 아톰을 만들 수 있습니다. 읽기 전용, 쓰기전용 등 다양한 파생 아톰을 만들 수 있습니다.

• 파생 아톰을 만들 때 첫번째 인자로는 read 함수, 두번째 인자로는 write 함수를 넣을 수 있습니다.
• read 함수의 인자에는 get 함수(아톰 값 반환)가 들어가고,
• write 함수의 인자에는 get(아톰 값을 반환), set(아톰 값 설정), arg(아톰을 갱신할 때 받는 값)가 들어갑니다.

// 읽기 전용 아톰
const profileAtom = atom(
  (get) => get(nameAtom) + get(jobAtom)
)

// 쓰기전용 아톰
const setProfileAtom = atom(
  (_),
  (get, set, arg) => {
    set(nameAtom, arg[1])
    set(jobAtom, arg[2])
  }
)