오봉이와 함께하는 개발 블로그

Router MPA(Multiple Page Application) 기존 웹페이지 작동 원리 Server Side Rendering 사용자가 다른 페이지로 이동할 때( 태그 사용) 마다 새로운 HTML을 받아오고 페이지를 로딩할 때 마다 서버에서 리소스 전달 받아 해석한 뒤 화면에 출력 사용자에게 보이는 화면을 서버에서 준비하여 전달 웹 출력 내용이 많은 경우 새로운 하면을 보여줄 때 마다 서버 측에서 모든 뷰를 준비 성능 문제 발생 사용하고 있는 상태 유지하는 작업이 번거로움 변경되지 않은 부분까지 새로 불러와야 하므로 불필요한 로딩이 있어 비효율적 캐싱과 압축 기능으로 최적화는 가능. 사용자와의 인터렉션이 자주 발생하는 모던 웹 애플리케이션에서는 부적합 SPA(Single Page Applicatio..

이벤트 처리 시 주의점 이벤트 이름은 카멜 표기법 사용 : onClick@@@, onKeyUp@@@, onChange@@@ 이벤트에 이벤트 핸들러 함수 형태의 값 전달 onClick = {onClickEnter} onClick = { () => setColor('green') } 이벤트는 DOM 요소에만 설정 가능 사용자가 만든 컴포넌트에는 이벤트 설정 불가 onClick을 props로 전달해서 컴포넌트 내부의 DOM 이벤트로 설정 가능 예 : MyComponent에 onClick 설정 시 했을 때 클릭 시 eventHandler() 함수를 실행하는 것이 아니라 이름이 onClick인 props를 MyComponent에 전달하는 것 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정..

함수형 컴포넌트에서 state 사용하기 React 버전 16.8 이전 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었다. 이후 버전에서 useState()를 통해 state 사용 가능 이 과정에서 Hooks라는 것을 사용 Hooks 16.8 버전에서 새로 도입된 기능 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 기능 제공 useState() : 상태 관리 useEffect() : 렌더링 직후 작업 설정 배열의 비구조화 할당 배열의 요소 값을 쉽게 추출하기 위한 문법 기존 방법 const array = [1, 2]; const one = array[0]; const two = array[1]; 배열의 비구조화 할당 방법 const array = [1, 2]; const [one, two] =..

이미지 출력 방법 1 : import src 안에 images 폴더 생성 후 이미지 저장 이미지를 사용하는 컴포넌트에서 이미지 import import imgApple from '../images/apple.png'; 이미지 출력 방법 2 : public 내에 assets 폴더 만들고 그 안에 이미지 파일 저장 이 방법은 import가 되지 않는다. 이미지 출력 방법 3 : state를 활용한 변수로의 이미지 출력 state 변수에 이미지를 저장하고 출력한다. 방법 1 : import - Image.js import React, { Component } from 'react'; import imgApple from '../images/apple.png'; imp..

state 컴포넌트에서 내부에서 변경될 수 있는 값 이 값이 변경될 때마다 리 렌더링 됨 값을 변경할 때는 반드시 setState() 함수(메소드) 사용 setState() 함수 사용하지 않고 직접 변경하면 리 렌더링 하지 않음 state 선언 state = { number:0 } state 사용 { this.state.number } 반드시 this 붙임 setState() 함수 사용해서 변경 this.setState( { number: this.state.number + 1 } ); props와 state 비교 props : 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 값, 읽거 전용 state : 컴포넌트 자신이 갖고 있는 값, 변경 가능 state 예제 - Counter.js, App.js clas..