리액트 문법

한 줄의 명령어 입력으로 React 프로젝트 개발에 필요한 필수요소를 자동으로 구성하는 방법craete react app을 쓴다는건 완제품을 구매하는 것과 같음1\. yarn 먼저 설치해주기yarn으로 패키지 설치시 npm으로 패키지 설치시 2\. yarn으로 reac

ui를 재사용이 가능한 개별적인 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.컴포넌트는 자바스크립트 함수와 유사'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환.import(들여오기)와 export(

자바스크립트를 확장한 문법자바스크립트의 모든 기능이 포함되어 있고 React Element를 생성하기 위한 문법JSX = JS + XML(= html)태그를 닫는 태그는 필수로 있어야함최상위 태그는 한개만! 있어야함(전체 감싸는 태그)JSX에서 자바스크립트 값을 가져오

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터즉 컴포넌트 간의 정보 교류 방법 props는 부모 -> 자식 단방향 전송만 가능읽기 전용으로만 취급하며 변경하지 않는다. Mother에서 변수를 선언한뒤 그 변수를 원하는 이름 ={변수}이런 식으로 작성하고 자식 컴포넌

직역하면 상태UI를 바꾸기 위해 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.리액트 안에서 변경되야하는 값은 반드시 state로 줄것state는 함수다!반드시 상단에 {useState} 있어야함return 안에 {스테이트}를 넣어줌 으로서 사용state 값을 변경할땐

불변성 : 메모리에 있는 값을 변경할 수 없는 것.원시데이터 : 불변성 O (수정시 저장된 값 자체는 바꿀수 X 새데이터를 만들고 그 새데이터를 바라보게 함)참조형데이터 : 불변성 X (수정시 저장되어 있던 메모리 저장'공간'의 값 자체를 바꿔버림. 메모리 참조는 그대

컴포넌트에 css 스타일을 적용시켜 꾸미는 방법이렇게 꾸미기 위해 아래와 같이 코드를 작성방법 1.return문 안에 div에 각각 변수로 만든 스타일들을 넣어줌 style={변수명} css파일외에 스타일 적용시 속성값을 ""로 묶어줘야함 style={style}은 전

해당 코드는 반복되는 코드가 많기에 리팩토링이 필요.따라서..map 활용위와 같이 map함수를 활용해서 이름만 바꿔 끼우는 식으로 한줄로 코드를 줄임map과 filter활용filter로 오이가 아닌것을 골라 나머지들을 map으로 돌면서 출력출력 결과각 객체의 나이와 이

html 태그에 classname을 지정한뒤 css파일을 생성해서 내용을 작성하는 기존의 방법과 다르게 css-in-js는 자바스크립트 코드로 css를 작성하여 컴포넌트를 꾸미는 방식이 방식을 사용하기 위해 쓰는 패키지(외부 라이브러리)가 Styled Component

useState를 사용하는 방식은 평소 사용하던 방식이 아닌 다른 방식도 있는데 그게 함수형 업데이트방식기존의 방법함수형 업데이트 방법currenNum을 받아와서 + 1을 해준다.기존의 방법과 동일한 기능은 동일하나 차이점이 있다.기존의 업데이트 방식은 함수를 여러번

렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅컴포넌트가 화면에서 보여졌을 때 무언가를 실행하고 싶다면 사용컴포넌트가 화면에서 사라졌을 때(return) 무언가를 실행하고 싶다면 사용위 사진의 경우는 input의 값이 변경될때마다 useEffect를 통해 c

DOM 요소에 접근할 수 있도록 하는 React Hook우선 useRef를 import한뒤 변수를 선언하고 초기값을 준다.그 아래와 같이 변수명.current를 사용하면 값을 변경할 수도 있다.설정된 ref값은 컴포넌트가 계속 렌더링이 되더라도 unmount 전까지 계

react context의 필요성 context > 여러 언어에서 전역적으로 사용하는 어떠한 것을 사용할 때 context라는 말을 씀 prop drilling > props로 자식 컴포넌트에 데이터를 내려줄때 너무 깊어지는 경우. 부모 => 자식 => 자식의 자

리렌더링 발생 조건 > 컴포넌트에서 state가 변경되었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트 역시 전부 리렌더링 최적화 > 리액트에서 리렌더링 발생 횟수는 줄이는게 좋음(비용이 발생: Cost) 따라

리액트 컴포넌트는 사람이 태어나고 죽듯 각각 Mount => Update => Unmount 의 과정을 거친다리액트 생명주기는 컴포넌트 중심 라이브러리의 집합체컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메소드들이 있다리액트 생명주기 표컴포넌트가 생성될

Document Object Model의 약자웹 페이지 = 문서(document)컴포넌트 = 엘리먼트(element)DOM이란 페이지에 있는 엘리먼트들을 tree형태(DOM TREE)로 표현한 것트리의 요소 하나하나를 '노드' 라고 부르며 각각의 노드는 해당 노드에 접

Redux의 필요성 > useState의 불편함 부모=>자식에게 내려줄때 여러 컴포넌트를 거치게 되면 단순히 전송을 위해 쓰이는 컴포넌트들이 생김 불필요하면서도 prop drilling이 생길 수 있어 비효율적이다. Redux사용시 이런 불필요한 과정 필요 없이 중

협업시 최대한 문제가 생기지 않도록 Erik Rasmussn이라는 개발자가 고안한 코드 작성 패턴Reducer 함수를 export default할것.Action creator 함수들을 export할것.Action type은 app/reducer/ACTION_TYPE 형

페이지를 구현할 수 있게 해주는 라이브러리해당 라이브러리를 이용하면 리액트로 다른 페이지도 구현 가능터미널로 yarn 또는 npm으로 설치페이지 컴포넌트 생성App.js에 import 및 적용페이지들 import BrowserRouter => Routes => Rout

REpresentaional State Transfer의 약자CRUD를 진행할 수 있게 HTTP 메소드(GET,POST,PUT,DELETE)를 사용하여 요청을 보내는 것. 이 때 요청을 위한 자원은 특정한 형태로 표현됨.쉽게 말해 URI를 통해 정보의 자원을 표현하고

리덕스 툴킷은 기존의 리덕스를 좀 더 쉽게 사용할 수 있게 개량한 것기존의 방식과 다르게 Action Value와 Action Creator를 직접 생성해주지 않고 Action Value + Action Creator + Reducer가 하나로 합쳐짐터미널로 설치cre

DB와 API 서버를 생성해주는 패키지 기본적으로 프론트엔드는 백엔드의 작업이 완성되기 까지 기다려야하기에 그 전에 테스트를 위해 사용하는 라이브러리프로젝트 최상단에 server => db.json 과 index.js 파일을 생성해당 명령어 입력시 자동생성db.json

node.js 와 브라우저를 위한 Promise 기반의 http 클라이언트 즉 http를 이용해 서버와 통신하기 위해 사용되는 라이브러리우선 학습을 위해 db.json으로 데이터 만들어 놓기(테스트용)실제로 할땐 만들 필요 없이 가져오면 됨해당 파일에서 데이터를 사용해

특정 상황에서 흐름을 개로채 직접 어떠한 코드 상의 관여가 가능해짐1\. 요청(request)이 처리되기 전(= http request가 서버에 전달되기 전)2\. 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전아래와 같은 부분에서 자

미들웨어 > 기존의 redux에선 dispatch를 하게 되면 action이 바로 reducer로 전달되고 reducer는 새로운 state를 반환함. 하지만 미들웨어를 사용하면 그 과정 사이에 하고 싶은 작업들을 넣어 사용 가능함 예를 들어 1을 더하는 버튼을

같은 기능의 함수를 사용하는 State들의 중복된 코드들을 확 줄일 수 있다. src => hooks => 원하는 이름.js 생성기존과 같이 내부에 값을 담을 state와 handler를 작성 사용하고자 하는 컴포넌트 내에서 파일을 import해 위와 같이 사용기존과

기존의 미들웨어들과 달리 보일러 플레이트(=사용하기 위해 작성해야하는 기본적인 코드)가 많이 없다.기존의 Redux thunk와 다르게 쉽고 직관적이다.Query = axios의 get요청과 비슷(요청시 데이터 제공)Mutaion = 어떤 data를 변경하는 것 axi

Throttling > 이벤트는 여러번 발생하지만 함수는 한번만 발생하는 것