post-thumbnail

NextJS 시작해보기

Nomad Coder의 'NextJS 시작하기' 메모입니다.

2023년 1월 19일
·
0개의 댓글
·

useNavigate()

◾ Link가 a 태그와 같이 클릭 시 특정 주소로 이동해주는 태그라면, useNavigate는 양식이 제출되거나 특정 행동을 하면 페이지 이동을 할 수 있는 "함수를 반환"하는 훅◾ 특정 조건을 충족할 경우에 페이지 이동이 가능하다.◾ index를 사용하여

2022년 12월 12일
·
0개의 댓글
·

Context

✔ 데이터를 넘길 때 props를 사용하지 않는 새로운 방식아래는 기존에 데이터를 props로 전달하는 방식과 Context로 전달하는 방식을 표현한 예시이다.Context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있

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

합성과 상속

✔ 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것.어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다.이러한 컴포넌트에

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

state 공유

종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있다. 이럴 때는 가장 가까운 공통 상위 컴포넌트로 state를 끌어올리는 것이 좋다. 하위 컴포넌트에서 상위 컴포넌트의 state를 사용 상위 컴포넌트에서 하위 컴포넌트의 state를 사용

2022년 12월 1일
·
0개의 댓글
·

폼(form)

✔ React에 의해 값이 제어되는 입력 폼 엘리먼트.✔ 제어 컴포넌트의 값은 state, setState, useState 로 관리된다.✔ < input type="file" >은 값이 읽기 전용이므로 비제어 컴포넌트(https://ko.reactjs.

2022년 11월 24일
·
0개의 댓글
·

리스트와 키(key)

기본 리스트 컴포넌트 이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다. Key > ✔ 리스트에서 아이템을 구분하기 위한 고유한 문자열. ✔ 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. ✔ 배열 내부의 엘리먼트에 지정.

2022년 11월 24일
·
0개의 댓글
·

조건부 렌더링

✔ React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. ✔ if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용.위에 나오는 Greeting 컴포넌트는 isLoggedIn이라는 변

2022년 11월 24일
·
0개의 댓글
·

Event handler(Event listener)

React의 이벤트 핸들러 > ✔ 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 ✔ 이벤트 리스너라고 부르기도 함 함수 컴포넌트에서의 사용 클래스 컴포넌트에서의 사용 클래스 컴포넌트에서는 bind를 꼭 해주어야 한다. 기본적으로 Javascript에서 클래스

2022년 11월 23일
·
0개의 댓글
·

useMemo()

· useMemo()란 Memoized value를 리턴하는 훅.· 연산량이 높은 작업이 매번 렌더링될 때마다 반복되는 것을 피하기 위해 사용.· 렌더링이 일어나는 동안 실행되므로 렌더링이 일어나는 동안 실행돼서는 안될 작업을 useMemo()에 넣으면 안 됨.

2022년 11월 14일
·
0개의 댓글
·