React

리액트란? Untitled사용자 인터페이스를 만들기 위한 JS 라이브러리.Single Page Application SPA.webp단일 웹 페이지에서 실행되며 단 한번만 리소스(HTML, CSS, JS)를 받고 그 후에는 데이터를 받아올 때에만(필요한 부분만) 서버

화면을 구성하는 하나의 단위. 리액트 세계에서 컴포넌트는 html을 return하는 함수.폴더는 소문자로, 파일은 대문자로 시작하는 카멜케이스로 이름을 지음.

JSX란?JS + XML. JS 코드에 HTML과 유사한 코드를 작성할 수 있도록 하는 구문 확장. Babel과 같은 컴파일러에 의해 일반 JS 코드로 변환됨.규칙태그는 꼭 닫아줄 것.무조건 1개의 엘리먼트만 반환할 것.JS 값을 가져오려면 중괄호를 쓸 것.class

Props란?부모 컨포넌트로부터 받아온 데이터.부모 → 자식 간에만 props 전달 가능함.이로 인해 props drilling 발생. 여러 수준의 중첩을 통해 동일한 데이터를 전달해야 하는 경우 코드가 더 복잡해지고 유지 보수가 어려워짐. 특정 컴포넌트에서 props

State란?컴포넌트 내부에서 바뀔 수 있는 값.state를 만들 때는 useState() 훅 사용.state를 변경할 때는 setValue 사용.useState + onClick EventuseState + onChange Event불변성이란?메모리에 있는 값을 변경

컴포넌트리액트에서 개발한 모든 애플리케이션은 컴포넌트라는 조각으로 구성됨.리액트 컴포넌트는 선언체임.리액트 코드는 내가 UI를 선언하고 render 함수를 호출하면 리액트가 알아서 절차를 수행해 화면에 출력해줌. 화면에 어떻게 그려야할 지는 리액트 내부에 잘 숨겨져 추

리액트에서의 map()객체가 담긴 배열추가삭제key컴포넌트 분리코드를 작성하다가 어느 순간 코드가 복잡하다고 느껴진다면, 관심사의 분리가 필요한 순간인지 생각해보는게 좋음. 리액트에서도 마찬가지로 하나의 컴포넌트에서 모든 기능을 구현할 수 없기 때문에 여러 개의 컴포넌

useEffect란? 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook. ex) 어떤 컴포넌트가 화면에 보여졌을 때 무언가를 실행하고 싶다면? 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect의

Strict mode란?애플리케이션 내 잠재적인 문제를 알아내기 위한 도구. Fragment와 같이 UI를 렌더링하지 않으며, 하위 컴포넌트에 대한 부가적인 검사와 경고를 활성화함.스트릭트 모드는 개발 모드에서만 활성화되기 때문에 프로덕션 빌드에는 영향을 끼치지 않음.

리액트 라우터 돔이란?페이지를 구현할 수 있게 해주는 패키지설치Router.js 생성 및 route 설정 코드 작성App.js에 importreact-router-dom HooksuseNavigatenavigate 생성 후 navigate(’보내고자 하는 url)을 통

리덕스란? 리덕스가 필요한 이유 Local state컴포넌트에서 useState를 이용해서 생성한 state.Global state

2개의 패키지 설치.폴더 구조 초기 설정configStore.jsindex.js

modules 폴더에 counter.js 생성initialState === 초기 상태값.useState 사용 시 괄호 안 초기 값을 지정해주 던 것과 같음. 위 state에서 만든 초기 값은 객체이고 그 안에 number라는 변수에 초기값 0 을 할당해준 것. 초기값은

리덕스의 주요 개념 store : 스토어는 애플리케이션의 전체 상태를 관리하는 단 하나의 객체임. 변경할 없으며 getState() 메서드를 통해 액세스할 수 있음. state를 변경하려면 스토어에 액션을 디스패치를 통해 보내야 함.action : 액션은 state

Action Creator란?액션 객체의 value를 변경할 일이 생긴다면? 프로젝트 규모가 커진다면 일일이 변경이 힘들어짐.Action Creator 만들기.액션 객체를 한 곳에서 관리할 수 있도록 “함수”와 액션 value를 상수로 만들어 줌.Action Creat

리덕스 툴킷이란? 설치기존 리덕스 코드와 비교일반 리덕스 - count툴킷큰 차이점은 Action Value와 Action Creator를 직접 생성해주지 않고 Action Value, Action Creator, Reducer가 하나로 합쳐짐.Slice 라는 툴킷

제이슨 서버란?간단한 DB와 API 서버를 생성해주는 패키지.BE에서 실제 DB와 API Server가 구축될 때까지 FE 개발에 임시적으로 사용할 mock data를 생성하기 위해 사용함.제이슨 서버를 통해 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의

Axios란? 공식 문서에 따르면 axios란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트라고 소개하고 있음. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지임.설치하기Axios GETGET은 서버의 데이터를 조회할 때

미들웨어란?소프트웨어에서 어떤 작업을 수행하기 전과 후에 발생하는 이벤트를 가로채는 소프트웨어 컴포넌트. 이를 통해 여러 가지 작업을 수행할 수 있음.리덕스 미들웨어 https://react.vlpt.us/redux-middleware/리덕스에서의 미들웨

커스텀훅이란?로직을 재사용하기 위한 방법 중 하나. useState, useEffect 등 리액트 내장 훅을 사용하여 공통된 로직이나 기능을 별도로 분리한 훅.기능은 동일하게 작동하되 중복 코드가 사라지고 전체적인 코드량 감소.파일의 이름 앞에 반드시 use라는 키워드

리액트로 만든 애플리케이션은 주로 SPA(Single Page Application)와 CSR(Client Side Rendering) 방식을 사용함.하나의 페이지에서 모든 기능과 렌더링을 수행하는 방식. ↔ MPA(Multi Page Application)장점전체 페

현재 공부중인 React는 UI를 구축을 위한 페이스북에서 개발된 자바스크립트의 라이브러리, Next.js는 이러한 React를 기반으로 어플리케이션을 개발할 때 발생하는 일부 단점을 개선하고 생산성을 개선하려는 목적으로 만들어진 Vercel에서 개발한 리액트 기반 프

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/리액트 컴포넌트에는 생명주기(Life cycle)가 있음.컴포넌트가 페이지에서 렌더링, 업데이트, 삭제될 때 발생하는 여러 단계를 의미함. 기존 리액

리액트(자바스크립트)에서 export와 export default는 모듈에서 객체, 함수, 변수 등을 다른 모듈로 내보낼 때 사용함.여러 개의 export 사용 가능함.import 시 이름 변경 불가능, 정확한 이름을 사용해야 함.import 시 중괄호 {} 안에 가져

해당 코드를 실행하면 렌더링엔 문제가 없으나 콘솔창을 확인해보니 list의 각 요소들은 고유한 key가 있어야한다는 경고 메시지가 나타난다.리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 친구이다. 요소에 고유성을 부여하기 위해 배열 내부의 요소에