Front-end/React 썸네일형 리스트형 [React] 훅(Hook) - useState 1. 정의 - 가장 대표적이고 많이 사용되는 훅 - 클래스 컴포넌트가 state를 사용하는 것처럼 함수 컴포넌트에서는 useState() 훅을 사용함 2. 사용방법 - useState()를 호출할 때 파라미터로 선언할 state의 초기값이 들어감 - useState(초기값)을 호출하면 배열을 리턴함 - 리턴한 배열에는 state로 선언된 변수, state의 set함수 두 가지 항목이 들어있음 const[변수명, set함수명] = useState(초기값); 3. useState 사용했을 때와 사용하지 않았을 때 비교 - useState를 사용하지 않은 코드 import React, { useState } from "react"; // Counter 함수 컴포넌트 function Counter(props) .. 더보기 [React] 라우팅, 라우터 1. 페이지를 분리하는 방법 1) 리액트를 사용하지 않고 페이지 나누는 법 ① html 파일 만들어서 상세페이지 내용 채움 ② 누가 /detail로 접속하면 html 파일 보내줌 2) 리액트를 사용해서 페이지 나누는 법 ① 컴포넌트 만들어서 상세페이지 내용 채움 ② 누가 /detail로 접속하면 그 컴포넌트를 보여줌 2. 리액트를 사용해서 페이지 나누는 방법 1) react-router-dom 라이브러리 사용 설치 npm install react-router-dom 2) index.js파일에 import하고 로 감싸기 import { BrowserRouter} from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById.. 더보기 [React] 이미지 넣기 1. css파일에 이미지 넣어서 사용하기 .main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : center; } 2. html에 직접 이미지 넣기 import bg from './bg.png'; div className="main-bg" style={{ backgroundImage : 'url('+bg+')'}}> 3. public 폴더에 이미지 넣어서 사용하기 - 이미지 같은 static 파일의 경우 public 폴더에 보관해도 됨 - public 폴더에 이미지를 저장하면 리액트 프로젝트 빌딩(html, js, css 압축) 시 압축 되지 않음 1) 간단한 사용.. 더보기 [React] <input /> 태그 1. 입력을 받을 수 있는 박스 생성 방법들 2. 에 입력 시 코드 실행하기 onChange/onInput 등 이벤트 핸들러 사용(필요 시 검색) 3. 에 입력한 값 가져오기 이벤트 핸들러에 들어가는 함수에 파라미터 e 추가하기 {console.log(e)}} /> e는 이벤트 객체, 현재 발생하는 이벤트와 관련한 기능을 제공하는 일종의 변수(e라는 이름 사용안해도 됨) 이벤트가 발생한 html 태그: e.target {console.log(e.target)}} /> 이벤트에 발생한 html 태그에 입력한 값: e.target.value {console.log(e.target.value)}} /> 이벤트 버블링 막기: e.stopPropagation() {console.log(e.target.value).. 더보기 [React] Redux(리덕스) 리액트: 사용자 정의 태그, 컴포넌트를 만들어서 체계적이고 잘 정돈된 애플리케이션을 만들게 해주는 기술 0. 리덕스의 필요성 1) SPA(Single Page Application)의 단점 - 컴포넌트 간 state 공유 어려움 - 부모 컴포넌트에서 자식 컴포넌트로만 state 공유 가능 2) Context API를 사용할 수 있지만 단점이 존재함 - state 변경 시 Context value 값이 변경되면 value값을 사용하지 않은 컴포넌트까지 재렌더링(쓸데없는 것 까지 재렌더링 됨 ) - useContext를 사용하는 자식 컴포넌트를 재사용하기가 어려움 더보기 1. Context API 사용 1) createContext() 로 Context 만들기 - context는 state 보관함 expor.. 더보기 [React] 스타일드 컴포넌트(styled-compnents) styled-compnents - CSS문법을 그대로 사용하면서 결과물을 스타일링 된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리 - 컴포넌트 개념을 사용하기 때문에 리액트와 궁합이 잘 맞음 - 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정 - 로 넣어주기 때문에 페이지 로딩 시간 단축 1) styled-compnents설치 # npm을 사용하는 경우 npm install --save styled-components # yarn을 사용하는 경우 yarn add styled-components 2) styled-components 기본 사용법 - 태그드 템플릿 리터럴(tagged template literal)을 사용하여 구성 요소의 스타일 지정 템플릿 리터럴 - 리터럴을 템플릿 형태로 사용.. 더보기 [React] 컨텍스트(context) 1. 컨텍스트(Context) 개념 - 컴포넌트들 사이에서 데이터를 props를 통해 전달하는 것이 아닌 컴포넌트 트리를 통해 곧바로 데이터를 전달하는 방식 - 어떤 컴포넌트든지 컨텍스트에 있는 데이터에 쉽게 접근할 수 있음 사용하는 시점 - 여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터가 있는 경우 - Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트의 데이터를 읽을 수 있음 사용 전 고려할 점 - 컴포넌트와 컨텍스트가 연동되면 재사용성이 떨어짐 - 다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면 기존 방식대로 props를 통해 데이터를 전달하는 것이 더 적합 컨텍스트 API -React.createContext() 컨텍스트를 생성하기 위한.. 더보기 [React] 합성(Composition)과 상속(Inheritance) 1. 합성(Composition) - 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 - 다양하고 복잡한 컴포넌트를 효율적으로 개발할 수 있음 2. 합성 기법 1) Containment - 하위 컴포넌트를 포함하는 형태의 합성 방법 - 리액트 컴포넌트의 props에 기본적으로 들어있는 children 속성을 사용 - 여러 개의 children 집합이 필요한 경우 별도로 props를 각각 정의해서 사용 2) Specialization - 범용적인 개념을 구별되게 구체화하는 것 - 범용적으로 쓸 수 있는 컴포넌트를 만들어 놓고 이를 구체화시켜서 컴포넌트를 사용하는 합성 방법 3) Containment와 Specialization - props.children을 통해 하위 컴포넌트를 포함시키기(Con.. 더보기 이전 1 2 3 4 다음
