React

React는 Component 기반의 UI 라이브러리 입니다. 모든 html 요소들을 컴포넌트화 하여 재사용할 수 있습니다. 레고를 만들어서 조립하는 느낌입니다. 기존 중복 코드로 인해서 발생하는 산탄총 수술을 할 일이 없습니다.React는 선언형 프로그래밍 입니다.

Node 기반 javascript UI 라이브러리다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리javascript 컴파일러, JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리React app을 만들기 위해서는 추가

자바스크립트의 확장 문법이자 자바스크립트와 html을 혼합해서 사용할 수 있는 react에서 주로 사용하는 표현식 입니다.src/MyHeader.jsApp.js컴포넌트를 하나 만들고 app.js에 추가를 해보았습니다.header가 잘 추가된 것을 확인할 수 있습니다.닫

계속해서 변화하는 특정 상태를 의미합니다. 상태에 따라 각각 다른 동작을 합니다.react에서 State는 컴포넌트가 가지는 동적인 데이터이고, State는 해당 컴포넌트가 관리하게 됩니다.Counter.jsApp.js이 프로그램의 목표는 + 버튼을 누르면 숫자가 1씩

상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용합니다.Counter.jsApp.js위 코드는 이전 게시글에서 만들었던 버튼을 눌러 숫자를 가감하는 프로그램입니다. 여기서 App 컴포넌트에서 Counter 컴포넌트에게 number 타입의 값을 보내고 그 값을 초기

한 줄 입력 처리하기여러 줄 입력 처리하기선택 박스 입력 처리하기사용자 입력 데이터 핸들링하기프로젝트 생성 후에 DiaryEditor.js 파일을 만들고 App.js에 import 하였습니다.App.jsDiaryEditor.js이제 여기에 input 박스와 textAr

일기 저장 버튼 클릭했을 때이름과 내용의 유효성 검사 후옳지 않다면 focus하기코드는 직전에 게시글과 동일합니다. 일기 저장 버튼을 클릭했을 시 이름은 1글자 이상, 내용은 5글자 이상 체크하는 로직을 구현해보도록 하겠습니다.DiaryEditor.js요즘 트렌드는 a

목표 React에서 리스트 렌더링하기 배열을 이용하여 React에서 List를 렌더링하고 개별적인 컴포넌트 만들어보기 먼저 list 배열을 props로 넘겨서 DiaryList.js에서 그 데이터로 렌더링을 해보도록 하겠습니다. App.js DiaryList.js

목표 React에서 리스트 데이터 추가하기 배열을 이용한 React의 List에 item 동적으로 추가하기 With React처럼 생각하기 현재 구현한 컴포넌트 & 데이터 구조 App 컴포넌트 아래 DiaryEditor와 DiaryList가 동일한 레벨의 컴포넌트로

목표 직전의 게시글에서 데이터를 추가했습니다. 이번에는 삭제 버튼을 만들어서 데이터를 삭제해보도록 하겠습니다. 해당 그림과 같이 게시글에 삭제 버튼을 달고 버튼을 누르면 해당 게시글이 삭제가 되게 하려고 합니다. 해당 게시글은 인프런 강의 "한입 크기로 잘라 먹는

배열을 이용한 React의 List에 아이템을 동적으로 수정해보기 With 조건부 렌더링App.jsApp.js에는 onEdit 메서드를 만듭니다. id와 newContent를 받아서 map 메서드를 사용하여 targetId와 게시글 id가 같다면 update를 합니다.

생애주기라는 뜻으로 일반적으로 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정 (출처 : 국민안정처) 이라는 뜻을 가지고 있습니다.React의 컴포넌트도 이런 생명주기 Lifecycle을 가집니다.한 눈에 봐도 복잡한 생명 주기를 가지고 있습니다

useEffect를 이용하여 컴포넌트 mount 시점에 api를 호출하고 해당 api 결과를 일기 데이터의 초기값으로 이용하기.자바스크립트 api 호출함수 fecth 사용하기.getData 함수는 open api인 "https://jsonplaceholder.

React Developer Tools react로 개발 시 생산성을 높혀주는 개발자 도구입니다. RDT는 chrome의 확장 도구입니다. chrome 웹 스토어에서 chrome에 추가를 누릅니다. RDT를 다운 받은 후에 chrome 우측 상단 점세개 > 확장 프로

현재 일기 데이터를 분석하는 함수를 제작하고 해당 함수가 일기 데이터의 길이가 변화하지 않을 때 값을 다시 계산하지 않도록 하기Memoization 이해하기이미 계산해 본 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해두었던 데이터를 반환 시

현재 App에서 count, text state를 가지고 있습니다. count state가 변경되어도 Textview는 리렌더링 되지 않게 업데이트 조건을 걸어보겠습니다.React.memo는 고차 컴포넌트 입니다.컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다

본인이 가진 state의 변화부모 컴포넌트의 리렌더링자신이 가진 props의 변경이 점을 생각하면서 컴포넌트 최적화를 해보도록 하겠습니다.React.memo를 맨 아래 달았습니다. useEffect를 사용하여 렌더링 될 때 로그를 남겨보겠습니다.페이지를 새로고침을 하니

리액트 공식 홈페이지 https://ko.legacy.reactjs.org/docs/react-api.html#reactmemo 해당 게시글은 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)" 를 정리한 내용입니다. 쉽게

현재 제 컴포넌트 최상단의 App 컴포넌트입니다. onCreate, onEdit, onRemove 상태 변화 처리함수를 가지고 있습니다. 컴포넌트가 길어지고 무거워지는 것은 좋은 것이 아닙니다. 그래서 복잡하고 긴 상태 변화 처리 함수를 컴포넌트 바깥으로 분리해보도록

리액트 컴포넌트 계층구조입니다. 현재 App컴포넌트에서 onEdit, onRemove 함수를 DiaryItem 컴포넌트에게 Props로 전달하고 있습니다. 여기서 문제는 DiaryList에는 onEdit, onRemove 함수를 사용하지 않지만 Props로 전달받고 다

새 프로젝트를 생성합니다. React Router를 설치합니다. 리액트 공식 홈페이지 https://ko.legacy.reactjs.org/docs/react-api.html#reactmemo 해당 게시글은 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.j

React에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리App.js/diary 페이지는 일기 상세 페이지 입니다. 그러므로 ex) /diary/1 이런 path variable로 숫자가 들어올 것입니다.이렇게 변경해주도록 합니다.Diary.js에서는 u

폰트세팅Google Web Fonts를 이용한 프로젝트에 사용되는 폰트 세팅레이아웃 세팅모든 페이지에 반영되는 레이아웃 세팅이미지 에셋 세팅감정 이미지들을 프로젝트에서 불러와 사용할수 있는 환경 세팅공통 컴포넌트 세팅모든 페이지에 공통으로 사용되는 버튼, 헤더 컴포넌트

상태관리 세팅하기프로젝트 전반적으로 사용될 일기 데이터 State 관리 로직 작성하기프로젝트 State Context 세팅하기일기 데이터 State를 공급할 Context를 생성하고 Provider로 공급하기프로젝트 Dispatch Context 세팅하기일기 데이터 S

데이터를 DB에 저장하여 가져올 수 있지만 프론트만 구현중이기 때문에 localStorage를 사용하여 데이터를 저장해보도록 하겠습니다.localStorage는 Web Storage의 한 종류입니다. 먼저 Web Storage API를 알아보도록 하겠습니다.브라우저에서

react에서 proxy를 사용하여 다른 포트에서 실행되고 있는 restapi를 호출해보도록 하겠습니다.package.json에 다음을 추가합니다.fetch를 사용하여 spring rest api를 호출해봅니다.아래 콘솔에는 데이터가 잘 찍혔으나 Warning이 발생하

들어오는 요청 url을 내가 원하는 url로 변경해 보았습니다. 간단하게 'react-router-dom'을 사용해 보았습니다. path / 로 들어오게 되면 Navigate 를 사용하여 /netwrok/interface로 이동시킵니다. /network/interfa