profile
I am FrontEnd Developer :)

useCallback Hook

이전에 만든 함수를 재사용할 때 사용한다. useMemo와 유사하나 useCallback은 함수를 위한 hook App.js inputs는 useState로 관리되는 상태 의존성 배열 [inputs]를 넣는다. (useCallback 내부에서 참조할 때 최신 상태

2022년 5월 7일
·
0개의 댓글

tmdb에서 영화 정보 불러오기

Movie List 01https://www.themoviedb.org/documentation/api/discover이 링크에 들어가면 원하는 데이터를 가져올 수 있는 URL 정보가 안내되어 있다.tmdb.js(key 노출을 방지하기 위해 .env 파일에 넣

2021년 12월 25일
·
0개의 댓글

간단한 영화 정보 웹 어플리케이션 만들기

redux 활용하기 : 상태관리firebase 활용하기 : 회원정보 및 데이터 관리하기api 활용하기 : tmdb api로 영화 정보 불러오기FirebaseTMDBreact-reduxreact-helmetreact-router-domreact-youtubestyled-

2021년 12월 25일
·
0개의 댓글

React 배열에서 key 값이 필요한 이유

key 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트 리액트가 어떤 항목을 변경/추가/삭제할지 식별하는 것을 돕는다. key값 지정하기 key값은 고유하게 식별 가능한 문자열을 사용한다. (대부분 데이터의 ID) key가 필요한 이유 key가

2021년 9월 21일
·
0개의 댓글

Context API를 사용해서 전역 값 관리하기

context API value 값이 컴포넌트 F, J에서 보여주고 있고, 이 값을 변화시키는 이벤트는 컴포넌트 G에서 발생한다. 이 상황에서 value 값과 handleSetValue 함수를 하위 컴포넌트에 props로 전달한다. value : Root -> A -

2021년 6월 29일
·
0개의 댓글

Custom Hook 만들기

src 디렉토리에 useInputs.js 커스텀 훅 컴포넌트 파일을 만든다.App.js에서 커스텀 훅 적용하기onCreate 함수의 deps에서 resets는 안넣어도 무방하나 eslint 규칙상 삽입한 것이다.

2021년 6월 11일
·
0개의 댓글

useReducer Hook

useReducer : 상태를 업데이트하는 Hook useState와의 차이점 useState 설정하고 싶은 다음 상태를 직접 지정하는 방식으로 상태 업데이트 useReducer Action 객체를 기반으로 상태를 업데이트한다. Action 객체 : 상태를

2021년 6월 8일
·
0개의 댓글

React.memo

리액트 최적화를 위해 사용한다. (컴포넌트의 리렌더링 방지)기존 함수(func)에 React.memo(func)로 감싼다.CreateUser.jsUserList.jsApp.jsonCreate, onRemove, onToggle 모두 users를 deps로 갖고 있기 때

2021년 6월 7일
·
0개의 댓글

useMemo Hook

주로 성능을 최적화해야 하는 상황에서 사용한다.App.js

2021년 6월 3일
·
0개의 댓글
post-thumbnail

useEffect Hook

리액트 컴포넌트가 화면에 처음 나타날 때, 사라질 때 특정 작업 가능 컴포넌트의 어떤 상태가 바뀌어서 업데이트 될 때 작업 가능, 리렌더링 될 때마다 작업도 가능 deps : 의존성 배열 (의존되는 값이 배열에 들어감) 비어있는 경우 컴포넌트가 처음 나타날 때에만

2021년 6월 1일
·
0개의 댓글

배열에 항목 제거하기

UserList.jsonClick={() => {onRemove(id);}} : 해당 id만 삭제하기 위해 user.id를 매개변수로 넣어서 onRemove 함수 호출App.jsfilter 함수 사용 : id값이 일치하지 않는 요소만 찾아서 새로운 배열로 반환

2021년 5월 25일
·
0개의 댓글

배열에 항목 추가하기

CreateUser.jsapp.js여러 개의 input 상태를 관리하려면 useState 사용 -> useState를 여러 번 사용하는 것이 아니라 useState에서 객체 형태로 상태를 만들어준다.\[name] : name이 가리키고 있는 것이 username이면 계

2021년 5월 25일
·
0개의 댓글

useRef로 컴포넌트 안에 변수 만들기

UserList.jsApp.jssetTimeout, setInterval의 id 외부 라이브러리를 사용하여 생성된 인스턴스 scroll 위치 등nextId를 useRef로 관리하는 이유 : 값이 바뀐다고 해서 컴포넌트를 리렌더링할 필요는 없음useRef는 특정 돔을 선

2021년 5월 24일
·
0개의 댓글

배열 렌더링하기

각 요소를 key props가 있어야 한다. 각 원소마다 고유값을 줌으로써 리렌더링 성능 최적화id값을 key값으로 설정 가급적 key에 index를 할당하는 것은 피해야 한다. console창에서 경고문구만 사라질 뿐 성능적으로 개선된 것이 아님key의 역할key가

2021년 5월 23일
·
0개의 댓글

useState 사용해서 여러 개의 input 관리하기

객체를 업데이트 할 때에는 스프레드 문법을 사용해 객체를 복사한 뒤 그 위에 덮어씌우는 방식으로 업데이트 해야한다.

2021년 5월 22일
·
0개의 댓글