이경욱

0. 기본 배경 (1) 리-렌더링의 발생 조건 A. 컴포넌트에서 state가 바뀌었을 때 B. 컴포넌트가 내려받은 props가 변경되었을 때 C. 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 (2) 최적화 리액트의 훅을 사용하면서 필요한 부분 외적으로 렌더링이 일어나는 것은 비효율이 발생하는 것이기 때문에 최대한 줄여야한다. 1. useState 가장 기본적으로 사용되며, 함수형 컴포넌트 안에서 가변적인 상태를 갖게 한다. 가변적인 상태란? 변경사항을 해당 부분만 업데이트 시킬 수 있는 것 // 사용 문법 const [state, setState] = useState(초기값); (1) 함수형 업데이트 기존의 변경할 값만 넣는 것이 아닌, 내부에 콜백함수를 줄 수 있다. 인자 부분에 현재 St..

1. 스타일 컴포넌트 사용 방법 백틱 안에서 스타일 코드를 작성한 뒤, 이렇게 태그 형식으로 스타일을 줄 수 있다. If 문, 삼항연산자 등의 자바스크립트 문법을 사용할 수 있다는게 가장 큰 장점이다. const StBox = styled.div` width: 200px; height: 200px; border: 1px solid red; margin: 20px; ` return ( Hello ); porps의 값에 따라 선택된 항목만 스타일 변경을 줄 수 있다. // 1. styled-components를 만들었습니다. const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor..

prop.finishBtn(prop.id)} > {tagSwitch(prop.isDone)} className 안에서 중괄호{} 로 자바스크립트 문법을 사용 가능하게 한 뒤 `` 백틱을 활용해 문자열과 함수를 섞으면 원하는 조건문을 활용할 수 있다. 삼항연산자를 이용해 조건문을 사용할 수도 있지만, 그렇게 되면 문자열과 섞을 수 없고 조건문에 값만 입력할 수 있기 때문에 디폴트 클래스 값은 그대로 두고 ${} 을 이용해 중간에 조건문 함수를 삽입하면 클래스의 조건문과 디폴트 값을 동시에 사용할 수 있다.

목차 1. 리액트 컴포넌트 2. JSX 3. 리액트 단축키 4. Props 1. React Component란? 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. (= 독립적이다) 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. * 컴포넌트 이름은 무조건 대문자로 시작해야 한다. * 폴더는 소문자로 시작하는 카멜케이스로 작성. props = input React Element = output 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(ret..

State State란? UI를 바꾸기 위해서 별도의 상태를 관리하는 것 useState('초기값') 함수임. 초기값을 넣으면 배열형태로 리턴함 초기값을 가지고 있는 변수를 생성. 인덱스 0 에 초기값, 인덱스 1 에 초기값을 변경할 수 있는 setState를 리턴 import React, { useState } from 'react'; function GrandFather() { const [name, setName] = useState("김할아"); // 이것이 state! return ; } 리액트 안에서 UI가 변경되는 값은 let, const가 아닌 useState를 사용한다. 이렇게 input 태그 안에서 들어오는 값을 바로 인식할 수 있게 만들기도 가능하다. import React, { us..

절대경로 지정하기 jsconfig.json 이라는 파일을 하나 만들어주고 아래 코드를 삽입하면 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 어떤 파일에서든지 절대경로로 지정할 수 있다.

React란? SPA 기반 프론트엔드 프레임워크 중 하나이며, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. 비슷한 프레임워크인 Angular JS, Vue JS 보다 월등히 인기가 많다! SPA란? Single Page Application, 한 개의 페이지로 이루어진 어플리케이션으로 MPA(Multi Page Application)과는 상반된 개념이다. MPA의 문제점 1. 좋아요 눌렀는데 웹사이트 다시 로딩 2. 요즘에는 페이지가 새로고침되는 상황이 너무 많기 떄문에 계속 깜빡거림. React의 특징과 장점 1. 한 개의 페이지로 구성된 웹 2. 서버에 1회 리소스를 요청 3. 그 이후 필요할 때 데이터만 받아와서 기존 페이지를 '수정' 하는 방식으로 요소를 변경 4. 사용자 입장..