리액트를 다루는 기술

1. 리액트 이해 MVC, MVW중 오직 View만 신경 쓰는 라이브러리 컴포넌트 : 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 CF) 템플릿 : 데이터가 주어지면 HTML 태그 형식을 문자열로 반환

리액트를 다루는 기술 2장을 이해한 대로 정리한 글입니다.보기 쉽고 익숙하다JSX 코드

단순한 템플릿 이상데이터가 주어졌을 때 이에 맞추어 UI개발라이프사이클 API 적용 가능클래스형 컴포넌트, 함수형 컴포넌트 2가지 유형 존재state 기능, 라이프사이클 기능, 임의 메서드 정의 가능state, 라이플사이클 API 사용 불가능 -> Hooks 기능으로

마우스 커서 올리기, 클릭하기, Form 요소에서 값 바뀌면 onChange 이벤트..

map()을 이용하여 반복 되는 컴포넌트를 렌더링파라미터로 전달된 함수를 이용하여 배열 내 각 요소를 원하는 규칙에 따라 변환결과로 새로운 배열을 생성한다.arr.map(callback, thisArg)callbackcurrentValue : 현재 처리중인 요소inde

라이프 사이클 : 페이지에 렌더링되기 전인 준비 과정 ~ 페이지에서 사라질 때 까지이럴 때..처음으로 렌더링할때 어떤 작업을 처리해야할 때업데이트 하기 전, 후에 어떤 작업을 처리해야 할 때불필요한 업데이트를 방지할 때Will 접두사 : 작업하기 전Did 접두사 : 작

첫 번째 인자로 현재 상태, 두 번째 인자로 상태를 바꾸는 함수상태를 변화시킬 땐 항상 불변성 유지앞에 다시 보기..리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행마운트 될 때 componentDidMount업데이트 될 때 componentDidUpdate예제 코드

사용할 예제 코드컴포넌트 내부에서 발생하는 연산 최소화실습 코드는 insert외에 input 내용 수정되어도 getAverage함수가 호출됨useMemo 사용하면 특정 값이 바뀌었을 때만 연산을 실행, 원하는 값이 바뀌지 않았다면 이전 연산 결과를 다시 사용코드useM

css : 기본 방식Sass : CSS 전처리기.CSS Module : CSS 클래스 충돌하지 않도록 고유한 이름 자동 생성Styled-components : 스타일을 JS 파일 안에 내장CSS 클래스 중복되지 않게 만들기이름을 컴포넌트-이름, 컴포넌트-클래스와 같이B

컴포넌트 구조yarr create react-app todo-appyarn add node-sass classnames react-icons.prettierrc 파일index.css 수정컴포넌트들은 src/components 디렉토리에 저장 ( 관습임 )TodoTemp

성능체크하기크롬 개발자 도구 이용performance 탭 -> 녹화기능 틀고 기능들 시험리렌더링 되는 상황자신이 전달받은 props가 변경될 때자신의 state가 바뀔 때부모 컴포넌트가 리렌더링 될 때forceUpdate() 함수가 실행될 때TodoApp의 경우할 일

깊어지는 전개 연산자 개선설치 : yarn add immer핵심 : 불변성에 신경 쓰지 않는 것처럼 코드를 작성하되, 불변성 관리는 제대로 해주는 것단순하게 깊은 곳에 위치하는 값을 바꾸는 것 외에도 배열을 처리할 때도 쉽다.concat 이나 ...연산자 말고도 pus

기존 방식다른 페이지로 이동할 때 마다 새로운 html, 페이지 로딩 시 서버에서 리소스 전달받아 해석한 뒤 화면 보여줌사용자에게 보이는 화면은 서버 측에서 준비.유동적인 html 생성해주는 템플릿 엔진 사용서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생바뀌지

시간이 걸리는 작업( 서버 쪽 데이터가 필요할 때 )은 Ajax 기법을 사용하여 서버의 API를 호출함으로써 데이터 수신서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되지 않고 응답을 받을 때까지 기다렸다가 전달받은 응

시간이 걸리는 작업( 서버 쪽 데이터가 필요할 때 )은 Ajax 기법을 사용하여 서버의 API를 호출함으로써 데이터 수신서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되지 않고 응답을 받을 때까지 기다렸다가 전달받은 응

전역적으로 사용할 정보들로그인 정보, 애플리케이션 환경 설정, 테마..일반적으로는 최상위 컴포넌트인 App의 state에 넣어서 관리한다.이럴 경우 컴포넌트가 깊어질수록 구조가 복잡, 유지 보수성 낮아진다.Context API를 사용하면 Context를 만들어 단 한

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리관련 로직을 다른 파일로 분리시켜 효율적으로 관리.컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달, 업데이트 가능전역 상태를 관리할 때 굉장히 효과적코드의 유지보수,

소규모 프로젝트는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만 규모가 커지면 상태 관리가 번거롭다.리덕스 사용의 이점상태 업데이트에 관한 로직을 모듈로 따로 분리.컴포넌트 파일과 별개로 관리할 수 있어 유지보수 도움.여러 컴포넌트에서 동일한 상태를 공유해

액션 생성 함수, 리듀서를 작성할 때 redux-actions 라이브러리와 immer 라이브러리 활용액션 생성 함수를 더 짧게 작성할 수 있다.switch/case 문이 아닌 handleActions 함수 사용 가능import { createAction, handleA

루트 리듀서 만들기counter와 todo 모듈을 설정하면 counter 리듀서와 todo 리듀서 두 개가 생성된다.리덕스에서 제공하는 combineReducers 유틸함수를 통해 modules/index.js에서 rootReducer 생성한다스토어 생성하기redux의