일단 하다보면 되겠지 ^v^ 자세히보기

리액트기본 6

[React] React Hook - useMemo

컴포넌트 최적화에 사용되는 hook은 useMemo와 useCallback이 있다. 이번엔 useMemo 를 다룬다! useMemo 란? useMemo의 Memo 는 memoization 을 의미한다. 동일한 값을 리턴하는 함수를 반복적으로 호출해야할 때, 맨 처음으로 값을 계산할 때 그 값을 메모리에 저장해 필요할 때 마다 메모리에서 꺼내 쓰는 기법이다. 혹은 자주 쓰는 값을 맨 처음 계산할 때 캐시메모리에 저장해 재사용하는 것이다. 렌더링이란 Component 함수가 호출되는 것이다. 이렇게 함수가 호출될 때 마다 내부에서는 모든 변수가 초기화 되는 상황이 발생한다. 컴포넌트가 반복적으로 호출되어도 초기화 되지 않게끔 우리는 useMemo 를 사용할 수 있다. useMemo 동작 순서 1. Compo..

React 2022.07.28

[React] React Hook - useContext & Context API

useContext 를 사용해야하는 이유 React 컴포넌트는 부모에서 자식으로 props 를 통해 데이터를 전달해야한다. 이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면 단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다. 중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고, 해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다. 이런 문제를 해결하기 위해 우리는 useContext 를 사용한다. 전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트 까지 데이터 전달을 손쉽게 할 수 있다. ex) 유저 정보, 테마, 언어, ... 하지만 Context 를 사용하게 된다면 컴포넌트의 재사용성이 떨어지므로 잘 생각..

React 2022.07.27

[React] React Hook - useRef

useRef 사용하기 const ref = useRef(value); ref 의 초기값은 useRef에 선언하며, ref 는 {current: value} 의 형태로 저장된다. 해당 객체는 수정이 가능하기 때문에 언제든 바꿔줄 수 있다! 그리고 컴포넌트가 unmount 되기 전까지는 값을 유지한다. useRef는 변경 가능한 객체를 반환한다. 반환된 객체는 useRef의 인자를 current 라는 속성에 저장한다. 반환 객체는 컴포넌트가 unmount 될 때 까지 지속된다. useRef 는 Ref 가 변해도 re-render 되지 않으며, re-render 되어도 Ref는 유지된다. 값이 아무리 바뀐다고 해도 렌더링이 일어나지 않기 때문에 성능적인 부분에서 유리하다. 사용 예시 1. 저장공간 state ..

React 2022.07.25

[React] React Hook - useEffect

Hook은 React 16.8 버전부터 새로운 요소로 추가되었다. 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 된것! useEffect 훅이란? 리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있게 하는 Hook이다. useEffect를 사용하게 되면 함수형 컴포넌트에서 부가기능(side effect) 를 사용할 수 있게 된다. 이때의 특정 작업(side effect)란 렌더링 된 이후에 비동기로 처리되어야하는 부수적인 효과들을 의미한다. useEffect 안에 적는 코드들은 - 복잡한 알고리즘 연산을 해야하는 경우 - 서버와 통신해 데이터를 가져오는 경우 - 타이머를 장착해야하는 경우 - ... 이제 함수형 컴포넌트에서도 생명 주기 메..

React 2022.07.25

[React] React 시작하기(9) - 합성

컴포넌트에 다른 컴포넌트 담기 props children 사용해 컴포넌트 합성 (1) function BigComponent() { return ( 합성을 위한 부모 컴포넌트 입니다 JSX를 중첩해 임의의 자식을 전달 할 수 있습니다! ); } function SmallComponent(props) { return ( {props.children} 자식 컴포넌트입니다 ); } props 의 children 을 사용하게 되면 자식 엘리먼트를 그대로 출력할 수 있다. 이렇게 다른 컴포넌트에서 JSX를 중첩시켜 임의의 자식을 전달할 수 있게 되는 것이다. props children 사용해 컴포넌트 합성 (2) function SplitSection() { return ; } function SideSectio..

React 2022.07.20

[React] React 시작하기(8) - state 끌어올리기

리액트는 기본적으로 단방향 데이터 흐름을 가진다. 그렇기 때문에 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터로만 형태, 타입을 확인할 수 있다. 해당 데이터가 state로 전달받은 것인지 혹은하드 코딩으로 입력된 데이터인지는 확인이 불가능하다. 상태(state) 끌어올리기란? 상위 컴포넌트의 상태 변경 함수 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 필요가 있다. 이땐 가장 가까운 공통 조상(컴포넌트)에서 state를 끌어올리는 것을 권장한다. 간단한 예제 참고! // 상위 컴포넌트 function LiftingState() { let [todo, setTodo] = useState([]); cons..

React 2022.07.19