# 리액트를 다루는 기술

41개의 포스트

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

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

약 20시간 전
·
0개의 댓글

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

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

약 20시간 전
·
0개의 댓글

ToDoList Web(3)

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

어제
·
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개의 댓글

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2021년 1월 3일
·
0개의 댓글
post-thumbnail

책 한권으로 시작하는 react (17)

redux 미들웨어 중 redux-thunk에 대해 알아보겠습니다.

2020년 7월 24일
·
0개의 댓글
post-thumbnail

책 한권으로 시작하는 react (16)

리덕스 미들웨어를 통한 비동기 작업관리 👀

2020년 7월 21일
·
0개의 댓글
post-thumbnail

책 한권으로 시작하는 react (14)

상태 관리 redux 라이브러리에 대한 내용입니다.

2020년 7월 17일
·
0개의 댓글
post-thumbnail

책 한권으로 시작하는 react (13)

React 상태 관리 Context API에 대해 알아보겠습니다.

2020년 7월 15일
·
0개의 댓글