react14 [React18] 14. Custom Hook React는 useState, useContext, useEffect와 같은 몇 가지 빌트인 훅이 있습니다. 구체적인 목적을 가진 Hook이 필요할 때가 있습니다. 컴포넌트로부터 Custom Hook을 추출하면 컴포넌트를 단순화할 수 있고, 둘 간의 중복을 제거할 수 있습니다. Custom Hook을 만들면 컴포넌트 내부 코드가 어떻게 하는지보다 Custom Hook으로 무엇을 하려는지가 명확하게 됩니다. 또한 브라우저 API나 외부 시스템과 소통하는 방밥과 같은 불필요한 세부 사항을 숨길 수 있습니다. 즉, 컴포넌트의 코드는 목적만을 나타낼 뿐 실행 방법에 대해서는 나타내지 않습니다. ** Custom Hook을 만들 때 훅의 이름은 언제나 use로 시작해야 하고 그다음의 첫 글자는 대문자여야 합니다.. 2023. 10. 7. [React18] 13. Effect에서 이벤트 분리 및 의존성 제거 (useEffect) 이벤트 핸들러와 Effect 중에 선택하기이벤트 핸들러는 같은 상호작용을 반복하는 경우에만 재실행됩니다(수동). Effect는 이벤트 핸들러와 달리 마지막 렌더링 때와 다르면 다시 동기화합니다(자동). 이벤트 핸들러 내부의 로직은 변화에 반응하지 않으면서 반응형 값을 읽을 수 있습니다(반응형 X). Effect 내부의 로직은 반응형 값을 읽는 경우 그 값을 의존성으로 지정해 값이 변경되는 경우 React가 새로운 값으로 Effect 로직을 다시 실행합니다 (반응형 O). Effect 이벤트의 한계의존성 배열에 여러 값이 들어있지만 값 중에 하나가 변경되더라도 Effect가 실행해서는 안 되는 값이 있습니다. 이때 비반응형 로직을 Effect에서 추출하려면 useEffectEvent라는 특수 Hook.. 2023. 10. 6. [React18] 12. Effect의 생명주기 (useEffect) Effect의 생명주기Effect는 컴포넌트와 다른 생명주기를 가집니다. 컴포넌트는 마운트, 업데이트 또는 마운트 해제할 수 있습니다. Effect는 동기화를 시작하고 나중에 동기화를 중지하는 두 가지 작업만 할 수 있습니다. 이 사이클은 시간이 지남에 따라 변하는 props와 state에 의존하는 Effect의 경우 여러 번 발생할 수 있습니다. ** 일부 Effect는 클린업 함수를 전혀 반환하지 않습니다. 이럴 경우 React는 빈 cleanup 함수를 반환한 것처럼 동작합니다. 개발 모드에서 React는 즉시 강제로 동기화를 수행하여 Effect가 다시 동기화될 수 있는지 확인합니다. 이는 개발 중에 Effect를 한 번 더 시작하고 중지하여 클린업 함수를 잘 구현했는지 확인합니다. React가.. 2023. 10. 5. [React18] 11. Effect 작성하는 법 (useEffect) 일부 컴포넌트는 외부 시스템과 동기화해야 할 때가 있습니다. 예를 들어 React의 state을 기준으로 React와 상관없는 구성 요소를 제어하거나, 서버 연결을 설정하거나, 구성 요소가 화면에 나타날 때 분석 목적의 로그를 전송할 수 있습니다. Effect는 렌더링 자체에 의해 발생하는 부수 효과를 특정하는 것으로, 특정 이벤트가 아닌 렌더링에 의해 직접 발생합니다. (Effect는 커밋이 끝난 후에 화면 업데이트가 이루어지고 나서 실행됩니다.)Effect를 작성하는 법컴포넌트에 Effect을 무작정 추가하기보다는 특정 외부 시스템과 동기화하기 위해 사용합니다. 만약 단순히 다른 상태에 기반하여 일부 상태를 조장하는 경우에는 Effect가 필요하지 않을 수 있습니다. 1. Effect 선언: 기본적.. 2023. 10. 4. [React18] 10. ref 컴포넌트가 일부 정보를 기억하고 싶지만 해당 정보가 렌더링을 유발하지 않도록 하려면 ref를 사용할 수 있습니다. React에서 userRef 훅을 가져와 컴포넌트에 ref를 추가할 수 있습니다. 참조할 초기값을 유일한 인자로 전달하며 useRef는 {current: 초기값}과 같은 객체를 반환합니다. state와 마찬가지로 문자열, 객체, 함수 등 무엇이든 가리킬 수 있습니다. ref.current 속성을 통해 ref의 현재 값을 접근할 수 있습니다. 렌더링에 정보가 사용되는 경우 state로 유지하고, 이벤트 핸들러만 정보를 필요로 하고 변경해도 다시 렌더링 할 필요가 없는 경우 ref를 사용하는 것이 더 효율적입니다. 또한 useState로 인해 리렌더링 되더라도 기존에 있는 값을 유지합니다. 일반.. 2023. 10. 3. [React18] 9. context props 전달하기는 명시적으로 데이터를 전달하는 훌륭한 방법입니다. 하지만 이 방식은 props를 트리를 통해 깊이 전해줘야 하거나, 많은 컴포넌트에서 같은 props가 필요한 경우에 불편할 수 있습니다. 데이터가 필요한 여러 컴포넌트의 가장 가까운 공통 조상이 트리 상 높이 위치할 수 있고 그러면 state를 끌어올리는 것은 “props drilling”이라는 상황을 초래할 수 있습니다.이를 해결하기 위해 context를 사용하면 부모 컴포넌트가 그 아래 트리 전체에 데이터를 전달할 수 있도록 해줍니다. 1. context 생성하기먼저 context를 createContext로 만들어야 합니다. 그리고 컴포넌트에서 사용할 수 있도록 파일에서 내보내야 합니다. import { createContext.. 2023. 10. 2. [React18] 8. reducer (useReducer) 컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 다양한 경우를 한눈에 파악하기 어려울 수 있습니다. 복잡성을 줄이기 위해 state 로직을 컴포넌트 외부의 reducer라는 단일 함수로 통합 관리할 수 있습니다. reducer는 state를 다루는 다른 방법입니다. 다음과 같은 세 가지 단계에 걸쳐 useState에서 useReducer로 바꿀 수 있습니다. state를 설정하는 것에서 action을 dispatch 함수로 전달하는 것으로 바꾸기.reducer 함수 작성하기.컴포넌트에서 reducer 사용하기.function handleAddTodo(text) { dispatch({ type: 'added', id: nextId++, text: text, }.. 2023. 10. 1. [React18] 7. state 관리하기 React는 선언적인 방법으로 UI를 조작합니다. 개별적인 UI를 직접 조작하는 대신 컴포넌트가 있을 수 있는 다양한 상태를 기술하고 사용자의 행동에 따라 state를 변경합니다. 1. 컴포넌트의 다양한 시각적 state 확인하기먼저 사용자에게 볼 수 있는 UI의 모든 상태를 시각화해야 합니다. 그리고 다양한 상태에 대한 목업을 만듭니다. (이런 목업들을 보통 storybook이라 부릅니다.)empty: form 비어있음 (제출 버튼이 비활성화)typing: form이 입력 완료 (제출버튼이 활성화)submitting: form이 비활성화되고 로딩 중success: 성공error: 실패 2. 무엇이 state 변화를 트리거하는지 알아내기사람의 입력(버튼 클릭, input 입력 등)과 컴퓨터의 입력(네트워.. 2023. 9. 30. [React18] 6. state 업데이트 스냅샷으로서의 statestate 변수는 읽고 쓸 수 있는 일반 자바스크립트 변수처럼 보일 수 있지만 스냅샷처럼 동작합니다. state를 설정하면 React에 리렌더링을 요청합니다. 여기서 렌더링이란 React가 컴포넌트(함수)를 호출한다는 뜻입니다. props, 이벤트 핸들러, 로컬 변수는 모두 렌더링 당시의 state를 사용해 계산되고, 해당 함수에서 반환하는 JSX는 시간상 UI의 스냅샷과 같습니다. 즉, React가 컴포넌트를 재렌더링할 때 함수를 다시 호출하고, 그 함수는 새로운 JSX 스냅샷을 반환하고, 반환한 스냅샷과 일치하도록 화면을 업데이트합니다. ** 컴포넌트의 메모리로서 State는 함수 반환된 후에 사라지는 변수와 다릅니다. state는 외부에 있는 것처럼 React 자체에 “존재”.. 2023. 9. 29. [React18] 5. useState와 React의 렌더링 컴포넌트는 상호 작용의 결과를 화면에 반영해야 하는 경우가 있습니다. React는 컴포넌트별 메모리를 state라고 합니다. state를 사용하지 않고 일반 변수에 상호 작용의 결과를 저장을 하면 작동할 거라 생각할 수 있습니다. React에서는 아래의 코드에 클릭을 하더라도 number 값은 변경되지 않습니다. 이러한 변화를 보이지 않게 하는 2가지 이유가 있습니다. 1. React에서 렌더링을 할 때 지역변수에 대한 변경사항을 고려하지 않고 렌더링 합니다. 즉, 지역 변수는 렌더링 간에 유지되지 않습니다. 2. 지역변수가 변경해도 React가 새로운 데이터로 컴포넌트를 다시 렌더링해야 하는 것을 인식하지 못합니다. export default function Counter(){ let numbe.. 2023. 9. 28. 이전 1 2 다음
