React Studybook

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

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

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

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

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

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

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

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

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

리액트에는 여러 스타일링 방법이 있다.CSS-in-JS 방법을 많이 사용하며 그 중에서도 대중적으로 사용하는 styled-components에 대해 알아보겠다. 먼저 styled-components를 import 한다.styled.button을 생성한다. styled.

타입스크립트란, Javascript를 기반으로 한 strongly-typed 언어이다. strongly-typed이란, 프로그래밍 언어가 작동하기 전에 type을 확인 하는 것이다.아래의 예제 코드를 보자.해당 코드를 실행시키면 user에는 name이 없지만 에러는 나