React

Page Routing : 웹서버가 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선택하고 페이지를 반환해서 사용자가 그 페이지에 접속하는 과정 Multipage Application (MPA) : 웹서버가 여러 개의 페이지를 가지고 있다가 요청이 들어오면 경로에

App.jsMyBotton.js→ type에 positive와 negative가 없는 글자가 오면 default로 설정

질문과 2개의 선택지 출력선택지 하나 선택지 다음 질문으로 넘어감 + progressbar 마지막 질문지에서 선택지 선택 후에 결과페이지로 넘어가기선택결과에 맞는 결과값 결과페이지에 출력선택된 결과에 따른 결과값 필터링하는 알고리즘⭐⭐⭐⭐⭐결과값 불러와 Result 컴

react-hook-form 라이브러리 : 컴포넌트 안에 반복적으로 사용되는 useState( )를 간소화할 수 있는 라이브러리

NavLink React-Router-Dom에서 `대신 `를 활용하여 .active에 스타일값을 지정하면 선택된 메뉴에 스타일이 적용 css useMatch( )

문제해결

오픈 그래프 : URL 링크를 올렸을 때, 나타낼 정보들 public → index.html

# 버튼 클릭하여 원하는 페이지로 렌더링 1. 버튼들 객체 생성 2. 버튼 클릭 시 상태변화 함수 선언 → 클릭한 버튼의 name을 state에 저장 → content에 name이 들어오면 해당 컴포넌트를 불러옴 3. 버튼에 onClick 할당 → map함

📍Font Awesome 패키지 설치 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지 font Awesome 아이콘 대한 패키지를 설치 Font Awesome을 React 컴포넌트 형태로 사용할 수 있도록 해주는 사용법(import) 📍React Ico

1. 라이브러리 사용 https://www.npmjs.com/package/react-js-pagination 2. 라이브러리 없이

게시판 checkbox 상태관리 체크된 아이템들 저장할 배열을 관리할 useState 생성 checkbox 개별선택 handleCheck()함수 생성 해당 checkbox가 checked되면 setCheckedItem배열에 해당 id를 저장 checked되지 않으

input요소에 페이지숫자를 입력하는 페이징네이션1.if-else문을 통해 범위 내의 페이지를 입력할 수 있도록 하는 handlePageChange함수 생성각 버튼마다 handlePageChange 선언 & input에 숫자 입력 후 "Enter"키 누를 시 handl

계산 결과를 메모리에 저장해두고 동일한 계산이 요청될 때 다시 계산하지 않고 저장된 값을 반환하는 최적화 기법함수 실행 결과값 리턴useEffect는 location이 변할 때만 콘솔을 호출하고 있지만 위에 input이 바뀔 때도 콘솔이 출력됨Why❓ 🤷‍♀️변수에

데이터를 불러올 때 useEffect 훅을 사용하고, 로딩 상태를 관리하기 위해 loading 상태 변수로 조건에 따라 로딩 UI를 보여주는 식으로 작동하게 함→ 간단한 상황에서는 충분히 유효하지만, 여러 개의 비동기 데이터를 다룰 때에는 조건부 렌더링 로직이 복잡해짐

브라우저의 DOM은 구조적으로 복잡하고, 이를 직접 조작하는 작업은 성능 비용이 상당히 높다.이를 개선하여 웹 애플리케이션의 성능을 최적화하기 위해 Virtual DOM이 등장했다.DOM 노드 트리를 복제한 자바스크립트 객체class, style 등 속성 ⭕️DOM a

props vs children | 특징 | props | children | | --- | --- | --- | | 정의 | 컴포넌트의 속성으로, 부모 컴포넌트에서 자식 컴포넌트로 전달하는 모든 데이터 | props의 특수한 속성으로, 부모가 자식 컴포넌트에 전달하는 자식 요소 | | 용도 | 부모에서 자식 컴포넌트로 데이터를 전달 | 부모가 자식 컴포...

useState() 를 조건문 안에서 사용하면 훅 호출 순서가 일관되지 않게 되어 React가 상태를 제대로 관리할 수 없으므로 오류 발생React는 컴포넌트가 렌더링될 때 훅이 호출되는 순서를 기준으로 상태를 관리합니다.하지만 useState()를 조건문 안에서 사용

컴포넌트가 리렌더링 될 때 초기화 → 이전 값 유지 ❌리렌더링이 되어도 값 유지 ⭕️useState()와 달리 상태값이 변경되어도 컴포넌트가 리렌더링이 유발되지 않음주로 DOM 요소에 접근(input에 focus를 주거나 스크롤 위치를 조정)setTimeout(), s

여러 상태 업데이트를 하나의 리렌더링으로 묶어 처리하는 React의 성능 최적화 기법입니다.상태가 변경될 때마다 컴포넌트는 리렌더링되는데, 여러 상태 업데이트가 연달아 발생할 경우 각각 렌더링이 일어난다면 비효율적입니다. 이를 방지하기 위해 React는 여러 상태 변경