본문 바로가기

전체 글

 (401)
React Hooks - React.memo로 컴포넌트 최적화하기 (useMemo, useCallback) 정리: 리엑트에서는 기본적으로 부모컴포넌트가 랜더링되면 반드시 자식컴포넌트 역시 랜더링된다. 따라서 자식컴포넌트에서는 부모로부터 받는 props에 변화가 생길때만 랜더링이 발생하도록 해주면 최적화에 도움을 준다는 생각을 할 수 있다. 리액트로 개발을 하다보면 굳이 반복해서 렌더링될 필요가 없는 컴포넌트가 계속해서 반복적으로 많이 렌더링이 되는 문제를 한번쯤은 겪어봤을 것이다. 대부분의 경우 컴포너트의 렌더링 문제를 크게 고민할 필요는 없다. 하지만 렌더링이 너무 지나치게 자주 발생하거나 매번 렌더링마다 무거운 로직을 처리해서 성능에 부담을 준다면 이는 컴포넌트 성능에 매우 좋지 않으므로 해결하는 것이 좋다. 이러한 문제를 해결하기 위해 리액트에서 제공하는 React.memo를 알아보자. 더불어 useMe..
React Hooks - useCallback (실습포함) useCallbck과 useMemo의 차이점은? useCallback도 useMemo와 같이 컴포넌트 최적화를 위해 사용된다. 다만 useMemo는 결과로 return된 값을 memoization하지만 useCallback같은 경우  콜백함수 그 자체를 메모이제이션 해준다.(잠깐 복습. 컴포넌트 최적화를 위해 사용되는 대표적 2가지 Hooks ==>> useMemo, useCallback 두번째 인자로 배열을 취하는 훅스 useEffect, useMemo, useCallback.useEffect는 component life cycle과 밀접하게 연관됨. 2번째 인자로 아무것도 안주면 componentDidUpdate의 역할을, 빈배열을 주면 componentDidMount의 역할을 함.useMemo 함수..
input 태그 속성정리 input태그는 그 안에 값을 입력할 수 있는 방법이 여러가지 존재한다. 그것을 정리해보고자 한다. 위와 같이 type="text"로 하여 입력을 받을 수도 있고 onChange와 value속성을 이용해서 입력을 받을 수도 있다. 또 아래와 같이 필요하다면 type, onChange, value속성을 모두 사용하여서도 값을 입력받을 수도 있다.
React Hooks - useContext + Context API 참고: https://www.youtube.com/watch?v=LwvXVEHS638&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=5 https://react.dev/reference/react/useContext 이문서를 봐라. 모든게 여기서 부터 시작하고 여기서 부터 끝난다. 이거 해석하면 매번 두려움에 떨지 않아도 된다. 1️⃣ contextAPI와 useContext 사용이유 🤬 전역적인 정보들을 props로 전달하려면 단계별로 일일이 다 써주고, 수정시에도 불편하다. 🤬 전역적인 정보: User, 테마, 언어 ✅ 이럴때 사용하는 contextAPI, useContext ✅ 리액트에서는 이러한 문제점을 해결하기 위해서 contextAPI를 제공한다. conte..
React Hooks -useEffect와 useRef를 이용한 간단한 프로그램만들기 Q. 창에 들어가면 input창에 기본으로 focus를 주고 시작한다. Login버튼을 누르면 input창에 입력한 username에 대한 방문인삿말이 alert창으로 나온다(반갑습니다 ***님). alert창을 닫으면 input창은 비워져 있고 focus를 받은 상태로 존재한다. 정답을 보기 전에 input태그에 대해 좀 알아보기로 한다. 원래 코드는 위와 같이 단순히 type을 text로 주었다. 하지만 type을 빼고 name속성을 주면 또 안된다. 그래서 이전에는 어떻게 짲나? 찾아보았더니 아래와 같은 코드가 있었다. type을 빼고 onChange와 value를 준 형태다. 아직까지 둘의 차이점은 잘 모르겠으나 두개 모두 정상적인 결과를 가져온다.
React Hooks -useEffect에 대하여 참고: https://hihiha2.tistory.com/169 훅스의 useEffect와 리엑트의 컴포넌트 라이프사이클은 밀접하게 관계된다. 위 글이 그 관계성을 어느정도 밝히는데 도움을 준다. useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다 useEffect Mount (화면에 첫 렌더링) Update (다시 렌더링) Unmount (화면에서 사라질때)..
React Hooks -useRef에 대하여(3) ref객체와 일반변수와의 다른점. ref를 사용하기 좋은 경우 ref와 variable의 차이점을 보여주는 예. render시 ref의 current값은 초기화되지 않지만 render시 함수형 컴포넌트 전체가 다시 실행되는 것이므로 변수(variable)는 초기값으로 초기화되는 것을 아래 예의 결과에서 확인할 수 있다. import React,{useRef, useState} from "react"; const App=()=>{ const[render, setRender]=useState(0); const ref=useRef(0); let variable=0; const doRender=()=>{ setRender(render+1); } const upRef=()=>{ ref.current=ref.current+1; console.log(ref.current); }..
React Hooks -useRef에 대하여(2) (*****내가 생각했던 모든 깊은 내용이 모두 공식문서에 있다. 반드시 공식문서를 익숙히 해야 한다. 공식문서가 가장 자세하고 친절한 설명서다*****) 반드시 공식 문서봐라. 중간에 이해하기 힘들면 이해하려 노력하고 그래도 안되면 그냥 두고 새 마음으로 다시 읽어나가. 그게 왕도다. 그게 정석이다. https://react.dev/reference/react/useRef#usage 아래 예시 반드시 익힐것. 복잡하지만 차근차근 짚어가면서 해석해야한다. state인 inputs는 객체이며 두개의 키인 '이름',과 'nickname'을 갖는다(주석1참고). 주목할 것이 onChange함수 안에 있는 주석3에서 e.target하여 value와 name을 구조분해 하여 취하고 있는데 여기서의 value, name은 input태그의 속성인 value와 name이다. 즉 input태그의 value, name의 값으로 input창에 무언가를 입력하면 그것이 속성va..

티스토리툴바