# 리액트를 다루는 기술

52개의 포스트
post-thumbnail

React 정복기(9) - useState 여러 번 사용 (함수형 컴포넌트)

하나의 useState 함수는 하나의 상태 값만 관리할 수 있음컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하자!좀더 연습해 볼까요??갑자기 사과가 땡겨서 아래와 같이 사과를 그냥 둘지, 먹을지 결정하는 컴포넌트를 만들어 볼께요먼저 App

2021년 2월 27일
·
0개의 댓글
post-thumbnail

TIL | React 함수형 컴포넌트

함수형 컴포넌트는 위코드 부트캠프 과정중 2차프로젝트 진행하다가 처음 만났던녀석입니다. 그 당시 클래스형 컴포넌트로 프로젝트를 진행하며 프로젝트 결과물을 만들어내기 급급했던 나로써는 새로 배운개념을 적용할 여유가 없었습니다.그러한 이유를 핑계삼아 뒤늦게 함수형 컴포넌트

2021년 2월 22일
·
0개의 댓글

리액트를 다루는 기술 정리 (17-3)

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

2021년 2월 14일
·
0개의 댓글

리액트를 다루는 기술 정리 (17-2)

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

2021년 2월 14일
·
0개의 댓글

리액트를 다루는 기술 정리 (17-1)

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

2021년 2월 14일
·
0개의 댓글

리액트를 다루는 기술 정리 (16)

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

2021년 2월 14일
·
0개의 댓글

리액트를 다루는 기술 정리 (15)

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

2021년 2월 14일
·
0개의 댓글

리액트를 다루는 기술 정리 (14)

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

2021년 1월 26일
·
0개의 댓글

리액트를 다루는 기술 정리 (13)

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

2021년 1월 26일
·
0개의 댓글

Redux Concept

리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리.지금까지의 상태 관리의 로직은 상태 관리를 쉽게 하기 위해 모두 App 컴포넌트에서 진행해왔음.App에서 모든 로직을 관리하고 있기 때문에 App 컴포넌트의 state를 업데이트하면 App 컴포

2021년 1월 26일
·
0개의 댓글

ToDoList Web(3)

👍 프로젝트 최적화 방법\-> 프로젝트 규모가 커질수록 컴포넌트 리렌더링 최적화를 하지 않으면 리렌더링되는 과정에서 버퍼링이 발생할 수 있다.리액트에서는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 됨.작은 프로젝트에서는 상관이 없으나, 규모가 커질수록 불필

2021년 1월 26일
·
0개의 댓글

ToDoList Web(2)

(1)에서의 프로젝트는 기본 외관만 짠 상태로 빈 껍데기입니다.상태 관리를 통해 프로젝트를 실제로 작동시켜보겠습니다.state뿐 아니라 메서드를 사용할 때도 비구조화 할당을 이용.this.props, this를 참조하지 않아도 됨.

2021년 1월 26일
·
0개의 댓글

ToDoList Web(1)

create-react-app todolistyarn add sass-loader node-sass classnames오류 발생 시 sass의 버전 맞춰주기. uninstall -> install @~yarn add open-color메인 스타일 설정index.js,

2021년 1월 25일
·
0개의 댓글

리액트를 다루는 기술 정리 (13)

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

2021년 1월 13일
·
0개의 댓글

리액트를 다루는 기술 정리 (12)

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

2021년 1월 7일
·
0개의 댓글

리액트를 다루는 기술 정리 (11)

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

2021년 1월 7일
·
0개의 댓글

리액트를 다루는 기술 정리 (10)

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

2021년 1월 7일
·
0개의 댓글

리액트를 다루는 기술 정리 (9)

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

2021년 1월 6일
·
0개의 댓글

리액트를 다루는 기술 정리 (8-2)

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

2021년 1월 5일
·
0개의 댓글

리액트를 다루는 기술 정리 (8-1)

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

2021년 1월 5일
·
0개의 댓글