[React] CSS, Image, className, 반복 요소 렌더링, list 복사

1. CSS - React에서 CSS를 import를 해줄 때는 import "./default.css" 처럼 해준다. - 그리고 CSS import는 프로젝트 시작점에 한번만 해주면 된다. 2. Image - Image를 쓰기 위해서는 import GAME_1 from "./images/game-1.jpg" 처럼 import를 해주는 방식으로 한다. - 그 다음에 import를 해준 이름으로 처럼 해주면 이미지를 사용할 수 있게 된다. 3. className - React에서 태그에게 class 속성을 줄 때 class로 주지 않고 className으로 줘야 한다. - CSS에서 똑같이 .클래스명 으로 접근할 수 있다. 4. 반복 요소 렌더링 - 화면에 안에 있는 몇가지 내용만 다르고 같은 UI를 반복..

[React] 리액트 훅(React Hooks)

1. 리액트 훅(Hooks) 및 종류 - 리액트가 함수 컴포넌트를 만들며 어떤 값을 유지할 수 있도록 "캐시"를 만들었다. - 이 캐시를 이용하여 상태관리를 할 수 있도록 만든 여러개의 API를 훅(Hooks)라 한다. - 즉, 초창기 함수 컴포넌트에서 상태 관리를 할 수 없었던 것을 리액트 훅을 이용해 클래스 컴포넌트에서의 상태관리가 가능하게 되었다. 종류 설명 useState Hooks에서 state를 관리하기 위한 기술 useEffect Component가 렌더링 되고 화면에 프린트 된 후에 발생 useLayoutEffect Component가 렌더링 되고 화면에 프린트 되기 전에 발생 useMemo 기존에 수행한 연산의 결과 값을 어딘가에 저장해주고 동일한 입력이 들어오면 재활용하는 프로그래밍 기..

[React] 클래스형 VS 함수형 컴포넌트

1. 클래스형 / 함수형 컴포넌트 클래스형 컴포넌트 - 전통적인 방식 - 리액트에서 컴포넌트를 작성할 때 Component를 상속 받아 작성하는 방법 - 즉, 클래스 형식으로 컴포넌트를 작성하는 방법 함수형 컴포넌트 - 버전 16.8부터 Hook 지원 - 자바스크립트 특성인 함수형 개발 방법을 이용하는 컴포넌트를 함수형으로 작성하는 방법 2. 클래스형 / 함수형 컴포넌트 특징 클래스형 컴포넌트 특징 - class 키워드로 시작 - Component를 상속 받음 - render() 함수를 사용해서 JSX를 반환 - props를 조회할 때 this 키워드를 사용 함수형 컴포넌트 특징 - JSX를 return 문을 사용해서 반환 - state를 사용할 수 없음 - 생명주기 함수를 작성할 수 없음 3. 클래스형..

[React] CSR vs SSR / SPA vs MPA / 리액트 라우터(React-Router)

1. CSR vs SSR CSR(Client Side Rendering) - 사용자가 페이지를 그림 => 사용자가 렌더링 부담 - 사용자가 웹 사이트에 접속 -> 서버에게 페이지에 필요한 리소스(code, asset)을 요청 - 페이지가 로드 될 떄 상품에 관한 정보를 백엔드 서버에 달라고 요청 - 사용자는 전달받은 리소스를 js까지 모두 로드한 후 화면에 표현 장점 - 필요한 자바스크립트를 사전에 미리 불러와 초기 렌더 이후의 속도는 빠름 - 특히 사전에 백엔드와 통신하는 부분이 없다면 SSR를 사용할 이유가 없음 단점 - 초기 페이지 로딩이 SSR보다 느림 - 사용자가 페이지를 렌더하는 동안 빈화면을 보게되므로 UX가 좋지 않음 - 사용자에게 렌더링을 부담 -> 사용자의 하드웨어에 의존 SSR(Ser..

[React] 이벤트(Event)와 이벤트 핸들러(Event Handler)

1. 이벤트(Event)와 이벤트 핸들러(Event Handler) 이벤트(Event) - 리액트의 이벤트는 웹 브라우저의 HTML 이벤트와 동일한 기능을 한다. - 또한, HTML 이벤트와 인터페이스가 동일하여 사용법 또한 비슷하다. 이벤트 핸들러(Event Handler) - HTML 또는 자바스크립트에서 이벤트 처리를 위해 사용하는 핸들러와 마찬가지로 리액트에서 이벤트를 사용하기 위해 프로그래밍하는 방법 또는 함수 event 매개변수 - 함수 형태로 값을 전달 할 때 함수 매개변수로 event를 받아서 사용할 수 있다. - event.target은 이벤트를 발생시키는 태그를 뜻한다. - event.target.value는 이벤트를 발생시키는 태그의 value를 뜻한다. - 이벤트 예시 2 참조 2...

[React] props와 state

* 리액트는 컴포넌트로 구성되며, 하나의 컴포넌트는 부모로부터 전달된 props를 바탕으로 DOM을 렌더링하기 위해 element들을 조합하여 render한다. * 또한 컴포넌트는 필요에 따라 값을 내부적으로 변경하기 위해 state를 갖는다. 1. props properties의 줄임말로 상위 컴포넌트(부모)가 하위 컴포넌트(자식)에 값을 전달하기 위한 방법으로 단방향 데이터 흐름 이 프로퍼티는 하위 컴포넌트 즉, 전달 받은 컴포넌트에서 수정이 불가 외부에서 전달되는 값으로 변경이 불가능한 특징을 가짐 2. props입력과 출력 - 자식 컴포넌트를 부르는 부모 컴포넌트에서 속성으로 prop를 입력할 수 있다. - 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)에게 prop을 입력을 했기 때문에 DOM을 ..

[React] 컴포넌트(Component)와 생명주기(LifeCycle)

1. 컴포넌트(Component) 리액트에서 컴포넌트는 Props와 State를 가지는 Object이다. 컴포넌트는 props를 외부에서 입력으로 받고 컴포넌트에서 엘리먼트를 조합하여 렌더링을 위한 DOM을 출력으로 반환하는 객체 즉, 부모로부터 전달된 props를 받아 DOM을 출력으로 반환한다. 리액트 엘리먼트 - React 엘리먼트는 , 과 같은 하나의 DOM에 해당하는 요소를 의미 따라서 리액트에서 엘리멘트들이 모인 구조가 하나의 컴포넌트를 의미한다. 엘리먼트들을 모아 모듈화한 재사용 가능한 크기의 집합을 컴포넌트라고 할 수 있다. 2. 컴포넌트 종류 클래스형 컴포넌트 - 리액트 초기의 컴포넌트 방식(구식) - 클래스형은 React.Component를 상속받기 때문에 import React fro..

[React] JSX이란? (정의, 주의 사항, 관련 문법)

1. JSX(JavaScript XML) JavaScript에 XML 개념 및 문법을 추가한 JavaScript 개발 문법이다. 공식적인 개발 방법이 아니며, 리액트에서만 사용되는 개발 문법이다. JavaScript문 안에서 HTML, CSS문이 가능하기에 편리하다. 2. JSX 주의 사항 및 관련 문법 반드시 부모 요소 하나가 감싸는 형태여야 한다. 자바스크립트 표현식 if문(for문) 대신 삼항연산자(조건부 연산자)를 사용 JSX 내에서 주석 사용 방법 3. 반드시 부모 요소 하나가 감싸는 형태 - 부모가 2개 이상이면 오류가 발생한다. - 반드시 부모는 1개로 만든다. - 이것의 해결 방법으로는 , 가 있다. 4. 자바스크립트 표현식 - JSX 안에서도 자바스크립트 표현식을 {}을 감싸 주어야 사용..

[React] DOM과 Virtual DOM

1. 문서 객체 모델(DOM) https://tadaktadak-it.tistory.com/140 [JavaScript] 문서 객체 모델(DOM) 1. 문서 객체 모델(DOM) - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 tadaktadak-it.tistory.com - DOM : Document Object Model - DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(object)로 변환 - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하..

[React] React 개요 및 설치, 기본 동작

** 프레임워크 vs 라이브러리 ** 프레임워크는 내가 개발할 때 환경에 종속되어 개발하는 경우를 말함 라이브러리는 내가 개발하는 언어에 추가로 파일을 연결하여 개발하는 경우를 말함 즉, 프레임워크는 미리 만들어진 틀 안에서 그 제한된 환경 안에서 사용하는 것이고 라이브러리는 원래 있는 환경에서 미리 만들어진 것을 가져와서 쓰는 것이다. 1. React(리액트) - 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 javascript로 만든 라이브러리 - React는 웹 브라우저의 UI를 구현하는 라이브러리로 기본적으로 CSS, HTML, JavaScript 개발언어를 이용한 컴포넌트 기반 프론트엔드 라이브러리이다. - React는 state가 변경되면 그 컴포넌트 만 리렌더링이 ..