React Basic

React는 (META)FACEBOOK에서 개발하였다.2013년에 초기 릴리스는 발표되었다.https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Csvelte%2Cangularjs

Visual Studio Code 사용https://code.visualstudio.com/react-tutorial이라는 이름으로 프로젝트를 구성한다.💡터미널 단축키 Ctrl + \`public/index.html 실제 브라우저에서 보여지는 파일앞으로 만들

선언 컴포넌트 생성 화살표 함수의 경우 es6 부터 제공함 (기호에 맞게 사용하면 된다.) 외부에서 해당 컴포넌트를 사용하기 위해서는 export 구문을 사용하여 외부접근을 허용해줘야하 한다. 라이브러리 라이브러리를 사용하기 위해서는 import 구문을 사용하면

리액트에서는 JSX 확장자를 통해서 컴포넌트를 생성한다.첫글자는 대문자로 시작해야한다.반드시 return 구문이 있어야한다.JSX 문법은 html을 리턴한다.리액트를 사용하기 위해서는 이렇게 createElement를 사용해서 해야지만 jsx 문법을 사용한다면 html

중복으로 사용가능한 (재사용 가능한)컴포넌트를 만들어서 사용할 수 있다.index.js사이드바, 헤더, 푸터 등 여러 화면에서 보여줘야 하는것을 컴포넌트로 만들어서 사용하면 관리하는 측면에서 매우 유용하다.

https://www.amazon.com/Best-Sellers-Books/zgbs/books아마존 판매 사이트의 책 리스트에 관한 클론코딩을 만든다.BookList(책 목록 컴포넌트)Book(책 컴포넌트) \- Image, Title, Author (책

리액트에서 자바스크립트와 비슷한 접근을 한다.카멜표기법을 사용하고 콜백함수로 실행될 함수를 넣어준다.예시다양한 접근 이벤트가 존재한다.함수가 포함된 컴포넌트 넣어보기input 은 글자가 입력될 때마다 handleFormInput 이벤트 실행button 은 클릭 할 때마

리액트에는 다양한 훅들이 존재하고 기본적으로 리액트에서 제공하는 useState, useEffect,useRef, useContext, useReducer 등과 커스텀으로 훅을 만들어서 사용할 수 있다.https://github.com/john-smilga/r

02-useState-basics.jsx현재 상태 값과 상태를 업데이트하는데 사용할 수 있는 함수 두개의 요소를 가진 배열을 반환default 값을 인자로 받음상태가 업데이트 괴면 컴포넌트가 다시 렌더링useState() 는 배열을 반환하는 함수이다. 배열의 첫번째 s

03-useState-array.jsx세 개의 상태 값을 설정 (name, age, hobby)브라우저에 렌더링버튼 생성 및 함수 설정 \- 버튼 클릭 시 호출 될 함수 설정 \- 하나의 함수가 세 가지 상태 값을 모두 업데이트사용자가 버튼 클릭 시 새로운 사람의

05-useState-gotcha.jsx상태 값과 버튼을 설정버튼 클릭 시 상태값 1씩 증가시키는 기능 추가setState 함수를 호출한 직후 상태 값을 로깅값이 증가된 직후에 바로 변경된 값을 출력할 수 없다.상태를 즉시 및 동기적으로 업데이트하려면, 이전 상태를

02-useEffect-basics.jsx함수 컴포넌트에서 부수 효과(side effects)를 수행하는데 사용되는 리액트 훅이다. 부수효과란 컴포넌트 외부의 작업을 의미하며, 주로 구독(subscriptions), 데이터 가져오기(fetching data), DOM

상태 값 생성JSX 상태 값을 토글(toggle) 하도록 설정하는 버튼을 생성조건에 따라 두 번째 컴포넌트를 반환두 번째 컴포넌트 내에서 useEffect를 생성하고, 초기 렌더링 시에만 실행되도록 설정!toggle 상태 값(boolean)으로 설정버튼 클릭시 togg

Basic 바닐라 자바스크립트에서는 조건문을 통해서 리턴되는 값을 나누어준다. 만약 어떤 함수에서 명시적인 반환문이 없다면, 그 함수는 기본적으로 'undefined'를 반환한다. 리액트에서는 주로 로딩을 기준으로 렌더링을 다르게 해준다(다른 상태값으로도 렌더링 기

useState 조건부 선언이 경우 condition이 true일 경우에만 상태가 생성조건부 반환 useEffectuseEffect의 호출위치가 조건부 반환 이후에 있어,이 경우 condition이 true로 값이면 useEffect는 호출되지 않는다.조건부로 내부에

JavaScript에서 단축평가(short-circuit evaluation)는 논리 연산자(&&및||)를 사용하여 간결한 방식으로 조건 평가를 수행할 수 있는 기술이다.&& 연산자(논리AND)는 첫 번째 피연산자가 falsy이면 첫 번째 피연산자를 반환하고, 첫 번째

상태 값을 생성 (boolean)버튼과 컴포넌트/요소를 반환사용자가 버튼을 클릭할 때상태 값을 토글 (반대 값)조건부로 컴포넌트/요소를 렌더링toggleAlert 함수를 사용하지 않고 onClick에 직접적으로 showAlert값을 변동가능하도록 할 수 있도록 간결하게

거의 통상적으로src 폴더 내부에 /components/conponentName.jsx/screens/componentName.jsx이런 식으로 컴포넌트를 구분해서 만든다.component를 불러올때 해당 폴더 명으로 불러오면 index.jsx를 인식하여 가져온다.ex

data.js 에서 people 배열 확인List.jsx 컴포넌트 생성List.jsx 에서 people 데이터를 가져와 순회 렌더링리스트 설정 후 Person.jsx 컴포넌트 따로 분리이름(name), 별명(nickname), 이미지(image)data.js우선 dat

Controlled Inputs 사용자에게 input 값을 받아 어떻게 사용하는지에 대해서 알아본다. form 생성 onChange & value input의 값을 관리하기 위해서는 value, onChange 속성을 사용해야한다. value는 input의 값을 o

React 컴포넌트에서 상태(state)를 변경할 때 주의해야하는 점이다. 상태를 변경하는 것이 항상 컴포넌트를 리렌더링하지 않는다.예를 들어, 상태를 업데이트하는 코드가 실행되더라도 React는 가상 DOM을 통해 실제 DOM을 업데이트할지 여부를 결정하며, 실제 D

커스텀 훅은 리액트에서 제공하는 일반적인 훅(useState, userEffect, useContext )과 동일한 규칙과 규약을 따른다. 커스텀 훅을 사용하면 복잡한 로직을 커스텀 훅으로 추상화하고 이 로직을 컴포넌트 코드 밖에서 분리함으로써, 컴포넌트 코드가 더 간

Context API Challenge 세 개의컴포넌트를 만들고 다음과 같이 구성한다. Navbar.jsx NavLinks.jax(Navbar 내에 위치) Usercontainer.jsx(NavLink 내에 위치) App.jsx 에서 Navbar.js

useState에서 배열을 사용하는 학습 선행 필요https://velog.io/@wotjr294/useState-Object리셋 기능 추가데이터 배열에 있는 값을 사용하여 리셋 기능 및 상태를 초기화하는 함수를 생성버튼 추가클리어 버튼과 비슷한 역할을 하는

컴포넌트의 상태(state)나 속성(props)이 변경되면, React는 이러한 변경 사항을 반영하기 위해 컴포넌트를 리렌더링한다.부모 요소가 리렌더링될 때(컴포넌트의 상태나 속성이 변경되지 않더라도)하위 상태(lower state)index.jsxList.jsxPer

React.memo는 React에서 제공하는 고차 컴포넌트(Higher-Order Component)로 컴포넌트를 메모이제이션할 수 있게 해준다. 이는 컴포넌트에 전달된 입력 속성(props)이 변경되지 않았다면, 메모이제이션된 컴포넌트는 이전 렌더링에서의 결과를 재사

useCallback훅은 React에서 제공하는 훅 중 하나로 함수를 메모이제이션하는 기능을 제공한다. 이 훅은 두 개의 인자를 받는다. 첫 번째는 메모이제이션하고자 하는 함수이며, 두번째는 의존성 배열(dependency array)이다. 의존성 배열 안의 값 중 하

useMemo useMemo훅은 React에서 값에 메모이제이션을 적용할 수 있는 훅이다. 두 개의 인자를 받으며 첫 번째는 메모이제이션을 적용할 값을 반환하는 함수이고, 두 번째는 의존성 배열이다. 의존성 배열 안의 값 중 하나라도 변경되면 메모이제이션된 값을 다시

useTransition은 React Hook으로, UI를 차단하지 않고 상태를 업데이트할 수 있게 해주는 훅이다.newItems을 만드는 과정에서 CPU 속도를 매우낮추게 된다.input의 텍스트가 변경될때마다 5000개의 리턴문을 새로 생성하게 된다.데이터를 가져오

Suspense API는 React에서 컴포넌트의 로딩 상태를 관리할 수 있게 해주는 기능이다. 어떤한 데이터가 가져와질 때까지 컴포넌트의 렌더링을 중단(Suspend)하고 그 동안 대체 UI를 표시할 수 있는 방법을 제공한다. 비동기 데이터 로딩을 처리하고 React