React
1.[React] 사용 이유, 파일구조 살펴보기
리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다
2.[React] JSX, 컴포넌트 생성, 스타일 적용방법
JSX는 JavaScript에 XML을 추가한 확장 문법이다.React에서 컴포넌트를 만드는데 유용하게 사용된다.닫는 태그가 반드시 있어야한다.
3.[React] state, props
리액트 컴포넌트에서 다루는 데이터는 state, porps 두 개로 나뉜다.state는 컴포넌트 내부에서 선언하여 내부에서 값을 변경할 수 있고props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다.상태를 의미하는 state는 이벤트에 의해 변경되는 동적인 값으로컴
4.[React] React Router 사용하기
리액트에서 링크 이동을 하려면 react-router-dom을 사용해야한다.라우팅은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것이다.원래 사용하던 MPA(Multi Page Application) 방식은,사용자가 다른 페이지로 이동할 때마다 새로운 HTM
5.[React] 영단어장 만들기 - state, props 이용해서 버튼 동작 만들기
앞에서 만든 영단어장에 "뜻 보기" 버튼과 체크박스 버튼으로 기능을 추가한다.뜻 보기 버튼 : 클릭 시, 뜻이 보여지며 버튼은 "뜻 숨기기"로 바뀐다.체크박스 : 클릭 시, 완료했다는 뜻으로 해당 단어가 딤처리가 된다.<td> 태그 각각에 <button> 태
6.[React] 간단한 일기장 만들기 (2) - 리스트 조회하기
앞서 만든 일기는 어딘가에 저장되는 기능은 만들지 않았으므로 배열에 저장할 것이다.React에서 배열은 게시글이나 리스트, 피드를 표시하는데 자주 사용된다.리스트 렌더링 (조회)하기배열을 이용하여 React에서 List를 렌더링 해보고 개별 컴포넌트 만들기.(2) 리스
7.[React] 간단한 일기장 만들기(3) - 리스트 추가, 삭제하기
(1) 리스트 데이터 추가하기 배열을 이용한 React의 List에 아이템을 동적으로 추가하기리스트에 데이터를 추가하기 위해서는 DiaryEditor에서 글이 저장되면 DiaryList에 나타나야한다.하지만 React에서는 같은 레벨의 데이터를 주고 받을 수 없다.(부
8.[React] Lifecycle 제어하기
일반적으로 시간의 흐름에 따라 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정.리액트 컴포넌트는 Lifecycle 생명주기를 갖는다. 이 생명주기는 3단계로 나눠진다.(1) Mount : 탄생, 화면에 나타나는 것.(2) Update : 변화, 업데이트 (리렌더).(
9.[React] 간단한 일기장 만들기(4) - API를 호출해서 일기데이터 초기값 설정하기
useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고 해당 API의 결과값을 일기 데이터의 초기값으로 이용한다.API는 JSONplaceholder를 이용한다.https://jsonplaceholder.typicode.com/comments
10.[React] 간단한 일기장 만들기(최적화1) - 연산 최적화
연산 결과 값을 재사용, Memoization 기법을 적용한 연산 최적화현재 일기데이터를 분석하는 함수를 만들고 해당 함수가 일기 데이터의 길이가 변화하지 않을 때 값을 다시 계산하지 않도록 하기프로그래밍 기법으로,이미 계산 해 본 연산 결과를 기억해 두었다가 동일한
11.[React] 최적화 Hooks - React.memo
리액트에서는 쓸데없는 렌더링을 방지하기 위해서 성능 최적화 hook을 제공한다.hook을 사용하여 의도하지 않은 렌더링을 최소화 시킬 수 있다.React에서는 렌더링이 다양한 상황에서 발생한다.Props가 변경될 때State가 변경될 때forceUpdate() 를 실행