react-tutorial
react-tutorial copied to clipboard
velopert
3. 기능 구현하기 · GitBook
다음 단락의 문장은 정확히 어떤의미인가요? Context를 하나만 만들면 왜 최적화를 못하는지 이유를 잘 모르겠습니다.
만약 우리가 Context 를 하나만 만들었다면 이런 최적화를 하지 못하게 됩니다.
혹시 이부분에서 TodoItem 값들을 받아 오는 경로에 대해서 질문드립니다! TodoItem Component 와 TodoContext Component 와 연관 시켜서 이해해보려고 해도 너무 헷갈리네요,,
TodoList.js
function TodoList() {
const todos = useTodoState();
return (
<TodoListBlock>
{todos.map((todo) => (
<TodoItem
key={todo.id}
id={todo.text}
text={todo.text}
done={todo.done}
/>
))}
</TodoListBlock>
);
}
TodoCreate 영역이 토글될때 value state가 초기화 되지 않는 문제로 인해 text 입력후 submit 하지 않고 닫았다가 다시 +로 open후 바로 enter시에 이전 value state를 참조하는 문제가 있어서 아래 코드를 추가해보았습니다. 이렇게 해도 OK 일까요?
useEffect(() => {
setValue('');
}, [open]);
그리고 맨 마지막 줄에서는 React.memo 로 감싸주었는데요, 이렇게 함으로써 TodoContext 에서 관리하고 있는 state 가 바뀔 때 때 TodoCreate 의 불필요한 리렌더링을 방지 할 수 있습니다. 만약 우리가 Context 를 하나만 만들었다면 이런 최적화를 하지 못하게 됩니다.
이게 이해가안되네유 ㅠㅠㅠㅠ
@cloudbaby1991 @jikimee64 만약 state와 dispatch를 하나의 context로 만들었다면, TodoCreate를 open한 상태에서 이미 존재하는 todo를 toggle할 때 TodoCreate는 리렌더링이 일어날 겁니다. 왜냐하면 TodoCreate가 state도 useContext로 받아오고 있기 때문이죠. TodoCreate입장에선 TodoState는 불필요하기 때문에, 굳이 받아올 필요가 없고 더군다나 리렌더링이 일어나게 한다면 더더욱 분리하는 것이 좋습니다.
- ToDoCreate const nextId = useTodoNextId();
이 변수 선언만하면 App.js가 렌더링이 안됩니다..뭐가 문제일까요?
TodoCreate 에 React.memo를 사용하지 않는다면 리렌더링이 일어난다는데, 해당 컴포넌트에 리렌더링이 발생 할 일이 있나요?
@clean-teach 제가 이해하기로는, Context.js의 TodoProvider 함수가 return하는 가장 바깥쪽에 위치한 state Provider에 변화가 생기면 그 안에 있는 요소들은 변경사항이 없어도 자동으로 리렌더링이 될 것입니다.
그 현상을 막기위한 React.memo라고 이해하면 될 듯 합니다.
TodoItem 에서 React.memo 를 써주는 이유는 각 요소가 삭제되거나 추가 추가됐을 때 가지고 있는 Item 전부가 리렌더링 되지 않게 막기 위함인거고
TodoCreate에서 React.memo 를 써주는 이유는 만약 써주지 않았다면 부모컴포넌트 (즉, Context) 상태가 바뀌면 자식 컴포넌트도 같이 리렌더링 됩니다. 따라서 React.memo 를 써줌으로써 TodoCreate 의 리렌더링을 막았다고 이해하면 될까요?
state 와 dispatch 를 분리했기 때문에 state 를 받지 않는 TodoCreate 는 본인의 상태가 바뀌지 않는한 할일 항목이 추가되더라도 리렌더링을 하지 않는거구요.
안녕하세요! 타입스크립트로 변경해서 따라하고 있는 중인데요, 끝까지 왔는데 삭제 버튼을 눌렀을 때 모든 항목이 사라지는 문제가 발생합니다. 아래와 같이 확인 해보았을 때 제가 클릭한 값만 사라지고, 필터도 제대로 된 것까지 확인이 되는데 왜 나머지 값도 같이 화면에서 사라지는 걸까요..?
- onClick={onRemove} 시 console.log
- onRemove 내부에서 console.log('on Remove!' + id); 치면 해당 id만 뜸
- TodoReducer > case 'Remove'
- console.log(action.id); 클릭한 컴포넌트의 id만 뜸
- console.log(state.todos.filter((todo: TodoType) => todo.id !== action.id)); 삭제한 것 외의 나머지 투두 목록 뜸
- TodoHeader
- 헤더에 초기 값 개수를 찍어 뒀는데, 투두 3개에서 1개를 삭제하면 모두 사라져서 개수 역시 빈 값으로 뜹니다.
삭제하고 filter 된 값을 띄우기 전에 렌더링 되어버린 걸까요? export default React.memo(컴포넌트) 해주긴 했습니다. 혹시 예상가는 이유가 있다면 답변 부탁드립니다. 좋은 강의 남겨주셔서 정말 감사합니다!
enter입력시 submit이 일어나던데
코드에서는 enter key코드 값과 관련한 코드가 없는데도
enter키 입력을 자동으로 입력값이 등록이 되는데
이건 어떻게 된걸까요?
제가 놓치는 부분이 있을까요?
