profile
Programmer
post-thumbnail

SPA + CSR + SSR

SPA (싱글 페이지 어플리케이션) CSR (클라이언트 사이드 렌더링)SSR (서버 사이드 렌더링)정리리액트를 다루는 기술 13장노마드 코더 Next.js서버 사이드 렌더링이란?https://linked2ev.github.io/devlog/2018/11/15/

2022년 1월 29일
·
0개의 댓글
·
post-thumbnail

컴포넌트 성능 최적화

React.memo함수형 업데이트useReducerreact-virtualized리액트를 다루는 기술 11장렌더링 되는 순서https://code-masterjung.tistory.com/67 나는 앞서 간단한 일정관리 앱을 만들어보았다. 그 과정에서 데이터가

2022년 1월 25일
·
0개의 댓글
·
post-thumbnail

react 일정관리 앱(미니프로젝트)

앱 설명코드구현 시 신경썼던 점 새로 알게되었던 점리액트 다루는 기술 10장리액트 다루는 기술 10장에 있는 미니프로젝트(TODOLIST)를 내 식대로 조금씩 바꾸어가면서 구현을 해보았다. 이 TODOLIST는 추가, 삭제, 수정, 그리고 토글 기능을 구현해 보았다.

2022년 1월 24일
·
0개의 댓글
·
post-thumbnail

REACT 컴포넌트 스타일링 방법

목차 > 1. 일반 CSS Sass CSS Modulesafd Styled-components 출처 리액트를 다루는 기술 9장 1. 일반 CSS react 컴포넌트 스타일링 첫번째 방법은 일반 CSS를 통한 작업입니다. 내가 CSS 작성에 자신이 있고 어떤 라이브

2022년 1월 22일
·
0개의 댓글
·
post-thumbnail

Hooks

목차 > 1. useEffect useReducer useCallback useMemo useRef 커스텀 훅 실습 예제 출처 리액트를 다루는 기술 6장 useCallback과 useMemo 차이점 https://develogger.kro.kr/blog/LKHcodi

2022년 1월 21일
·
0개의 댓글
·
post-thumbnail

라이프 사이클에 대해

라이프 사이클이란 ??라이프 사이클 메서드 종류라이프 사이클 동작 과정에러 잡아내기 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재합니다. 컴포넌트 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이납니다. 이 라이프 사이클 메서

2022년 1월 19일
·
0개의 댓글
·
post-thumbnail

ref에 대해서

ref란?ref 선언하는 방법컴포넌트에서 ref를 선언하는 방법리액트를 다루는 기술 5장Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호

2022년 1월 17일
·
0개의 댓글
·
post-thumbnail

react 이벤트 핸들링

리액트 이벤트 시스템 주의사항class 컴포넌트에서 이벤트 핸들링input 여러 개 다루기이벤트 이름은 카멜 표기법으로 작성한다.ex) HTML의 onClick은 리액트에서 onClick으로 작성이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값

2022년 1월 16일
·
0개의 댓글
·
post-thumbnail

Props&State(feat:setState가 비동기인 이유)

목차 > 1. 컴포넌트 props state 출처 리액트를 다루는 기술 1. 컴포넌트 리액트의 가장 큰 장점을 화면의 각 구성 요소를 컴포넌트로 나누어 이를 재사용하기 쉽게 만들었고 이를 통해 유지보수 또한 굉장히 쉽게 할 수 있다는 장점이 있습니다. 추가적으

2022년 1월 14일
·
0개의 댓글
·
post-thumbnail

JSX

바벨웹팩jsxjsx 문법EsLint, Prettier 우리가 CRA(create-react-app)을 통해 리액트 프로젝트를 설치를 하게 되면 여러 개의 파일들이 생성되고 npm start를 누르게 되면 실행이 됩니다. 하지만 우리 브라우저 환경에서는 모듈을 불러와서

2022년 1월 13일
·
0개의 댓글
·
post-thumbnail

리액트에 들어가기에 앞서?

목차 > 1. 왜 리액트인가? 리액트의 특징 출처 > 리액트를 다루는 기술 1장 >리액트 초기 렌더링 https://dev.grapecity.co.kr/bbs/board.php?botable=wijmobntips&wr_id=103 https://kentcdodds.c

2022년 1월 12일
·
0개의 댓글
·
post-thumbnail

Context API vs Redux

react의 useState를 이용하면 지역 상태 관리를 할 수 있습니다. 하위 컴포넌트에서 해당 state를 사용하기 위해서는 props를 통해 하위 컴포넌트로 전달하여 사용할 수 있고 하위 컴포넌트에 state는 상위 컴포넌트에서 사용할 수 없습니다. 만약 리액

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

[React] ref와 memo에 대해서

일반적으로 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접 자식을 수정해야하는 경우에

2021년 11월 8일
·
0개의 댓글
·