다음과 같은 계층 구조가 있다고 하자. 이때 App 컴포넌트에서 만든 임의의 함수 A를 TodoItem으로 넘기기 위해서는 TodoList를 거쳐서 보낼 수밖에 없다. 이러한 과정은 복잡하고 깊은 계층 구조를 가질수록 끔찍해질 수밖에 없다. 이런 상황을 Props Drilling라고 표현한다. Props Drilling 상황에서 만약 함수의 이름을 변경하기라도 한다면, 함수가 거쳐가는 모든 컴포넌트를 수정해야 한다. Context는 이러한 상황을 피하고 자식컴포넌트에게 데이터를 직송으로 보내줄 수 있게 도와준다. 이런 식으로 할 수 있다. 새로운 TodoContext 컴포넌트를 만들고, createContext 메서드를 이용해서 위처럼 하면 Context가 생성되는 것이다. createContext 메서..

최적화란 웹 서비스의 성능을 개선하는 것을 말한다. 웹 서비스의 성능을 개선하기 위해서는 코드, 폰트, 이미지 등의 사이즈를 줄이거나, 페이지 로딩속도를 빠르게 하거나, 불필요한 연산을 다시 수행하지 않게 하는 등등의 행동을 할 수 있다. 불필요한 연산을 다시 수행하지 않게 해서 페이지 렌더링 속도를 빠르게 만들어주는 다양한 리액트 내부 최적화 기법을 살펴본다. 재연산을 방지하는 useMemo useMemo는 특정 조건을 만족하지 않으면 컴포넌트가 리렌더링 되더라도, 어떤 연산들을 다시 실행하지 않게 도와준다 useMemo() useMemo의 첫 번째 인수로는 콜백함수를 넣어주고, 콜백함수 안에는 특정 조건에서만 다시 실행시키고 싶은 연산을 넣어준다. 두 번째 인수로는 의존성 배열(Deps)을 전달하면 ..

useReducer는 useState와 동일하게 새로운 State를 생성하는 Hook이다. 기본적으로는 useState와 완전히 동일한 기능을 한다. useState는 컴포넌트 내부에 State 관리 로직을 작성해야 하지만 useReducer는 컴포넌트 외부에 State 관리 로직을 분리할 수 있다. useReducer에는 인수로 두 가지 값을 전달해야 한다. 첫 번째 인수로는 reducer라는 함수를 전달한다. 그래서 외부에 reducer라는 함수를 만든다. 두 번째 인수는 생성하려는 State의 초기값을 넣어준다. 이런 식으로 useReducer을 호출하면 새로운 State가 자동으로 생성된다. 이때 두 번째 인수로 전달한 0이 count State의 초기 값이 되는 것이다. useReducer는 u..

체크박스 수정 데이터가 들어있는 todo State이다. 체크박스를 눌렀을 때, 변화가 생기게 하려면 위의 값에서 isDone값만 수정해야 한다. 즉 기존의 todos 배열을 수정해야 하기에, 우선 onUpdate 함수를 생성한다. 또한 어떤 todo가 체크되었는지 확인해야 하기에 id 값을 받아와야 한다. id를 받아오기 위해 매개변수 이름을 targetId로 지정한다. 이후 상태변화 함수인 setTodos를 호출하고, 받아온 id에 해당하는 todo만 수정하면 된다. map 함수를 통해 todos를 순회시키고, 현재 todo.id와 매개변수로 받아온 id가 같을 때만 수정하도록 한다. 이후 해당 함수를 자식컴포넌트로 전달한다. 자식 컴포넌트에서 구조분해할당을 통해 해당 함수를 받아오고, 사용하기 위한..

[key 값 전달] 리액트에서는 위의 todos 같이 배열 형태로 저장된 데이터를 map 메서드를 이용해서 리스트로 렌더링 할 수 있다. map 메서드를 이용해서 여러 개의 컴포넌트를 리스트로 렌더링 하고 있다. 리액트에서는 이렇게 map 메서드를 이용해서 어떤 html요소나, 컴포넌트를 렌더링 할 때는 반드시 고유한 식별자(key prop)를 전달해줘야 한다. 그래야 리액트가 내부적으로 리스트형태로 렌더링 된 여러 개의 item을 식별할 수 있게 된다. 즉 고유한 식별자를 전달하지 않으면 특정 요소를 삭제, 수정 또는 리렌더링 할 때, 성능이 느려지거나, 의도치 않은 문제가 발생할 수 있다. 이렇게 고유의 key 값을 전달해 주면 해당 오류가 사라진다. [서치바 만들기] 입력된 글자와 매칭되는 cont..

1. 아무것도 입력하지 않았을 때, 값 보내지 않게 하기 투두리스트에 빈 값을 보내도 추가된다면 좀 곤란할 것 같다. 그럼 투두리스트 실천하기는 좋겠다만 쓰는 의미가 없어지니 말이다. 우선 useRef를 호출하고, input을 참조하게 한다. onClick 함수은 버튼의 onClick에 들어가는 이벤트 핸들러이다. 값을 최종적으로 보내는 부분이다. if문을 통해 content가 공백이라면 inputRef가 참조하는 값에 포커스를 주고 바로 retrun 시켜버린다. 이렇게 되면 공백일 때 아래의 onCreate(content)가 실행되지 않고, 빈 값을 보내지 않게 된다. 2. input 박스에 값을 입력했을 때 초기화 값을 입력하고 추가버튼을 누르면, 값은 잘 들어가지만 input 태그가 초기화가 안된다..