공부/React13 2023.01.21 - React 데이터 흐름 1. 리액트는 단방향 데이터 흐름을 가지고 있다. 2. 컴포넌트 단위로 생각하자(컴포넌트 설계방식) - 리액트의 개발방식의 가장 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 시작한다. - 프로토 타입에서 컴포넌트를 찾아 컴포넌트를 만들고 페이지를 조립한다. -> 샹향식(bottom-up) 으로 만든다.( 테스트가 쉽고 확장성이 좋음) 3. 데이터는 위에서 아래로 흐른다. - 단방향 데이터 흐름 - 컴포넌트는 바깥에서 props를 이용해 데이터를 마치 전달인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다. - 데이터를 전달하는 주체는 컴포넌트가 된다. (데이터 흐름이 하향식임을 의미/ top-down) 2023. 2. 6. 2023.01.20 - React Hook / useRef - useRef : .current 프로퍼티로 전달된 인자(initilaValue)로 초기화된 변경가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. - useRef 는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. - useRef는 DOM을 선택하는 용도 외에도, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있다. 사용 예) focus 1) useRef 를 사용하기 위해 authorInput, contentInput 객체 생성 더보기 const authorInput = useRef(); const contentInput = useRef(); import { useRef, useState } from "react"; // us.. 2023. 1. 30. 2022.08.21 - optimizing performance성능 최적화 ** 리액트는 필요할때만 랜더한다. - reconciliation 재조정 리액트는 컴포넌트에서 prop이나 state가 변경될 때, 직전에 렌더링된 요소(element)와 새로 반환된 요소를 비교하여 실제 DOM을 업데이트 할지 말지 결정해야 한다. 이때 두 element가 일치하지 않으면 리액트는 새로운 요소로 DOM을 업데이트 하는데, 이러한 프로세스를 reconciliation이라고 한다. - dom 엘리먼트의 타입이 다른 경우: 이전 트리를 버리고 완전히 새로운 트리를 구축 - dom 엘리먼트의 타입이 같은 경우: 두 엘리먼트의 속성(attribute)을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 업데이트 한다. 1. 자식에 대한 재귀적 처리 DOM 노드의 자식들을 재귀적으로 처리할 때, .. 2022. 8. 21. 2022.08.15 - Unit Test, JEST, TEST 코드작성 - JavaScript Unit Test : 통합테스트에 비해 빠르고 쉽다. 통합테스트를 진행하기 전에 문제를 찾아 낼 수 있다. (단, 통합테스트 성공 보장은 없음) 테스트 코드가 살아있는(동작을 설명하는) 명세가 됨테스트를 읽고 어떻게 동작하는지도 예측 가능함 선 코딩 후, 몰아서 단위테스트가 아니라 TDD를 해야함단위테스트를 작성하고, 그것에 맞는 코딩을 작성하는 버릇이 필요 - Jest Javascript testing FrameWork로 CRA에서 기본적으로 제공하는 test 로서 입지를 다져 대중적으로 쓰이고 있음 facebook의 openSource로 가장 핫한 테스트 도구 Easy Setup, Instant Feedback(고친 파일만 빠르게 테스트 다시 해주는 기능 등) Snapshot .. 2022. 8. 15. 2022.08.14 - 컴포넌트간 통신, context API, useContext 1. 하위 컴포넌트 변경하기 - 상위 컴포넌트에서 하위 컴포넌트에서 쓰이는 state의 값을 변경 하는 경우 - A컴포넌트(버튼) -> B컴포넌트 -> C컴포넌트 -> D컴포넌트 -> E컴포넌트(pros.value) - A의 버튼을 클릭해서 E컴포넌트에 있는 value를 변경한다. - 상위 컴포넌트의 state 값을 props로 내려서 변경한다. export default function A() { const [value, setValue] = useState("아직 안바뀜 "); return ( E의 값을 바꾸기 ); // 클릭 function click() { setValue("E의 값을 변경 "); } } // 바뀐 값을 b가 c로 변경 function B({ value }) { return ( 여.. 2022. 8. 14. 2022.07.13 - React / useMemo, useCallback, useRef useReducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 상태를 관리할때 사용하는 hook 함수로, useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. - useMemo : 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 시키는 Hooks 이다. 리액트는 dom에 변화가 있을때마다 랜더링을 하는데, 그 과정에서 수행해야할 연산을 계속 반복한다. 이것은 자원의 낭비가 될 수 있으므로 원하는 연산을 수행하지 않을때에는 변하지 않게 하도록 정하는 것이 useMemo이다. const num = useMemo(callback, deps); //deps는 연산을 수행할 배열 const count = useMemo(() => { //.. 2022. 7. 13. 이전 1 2 3 다음
