React 썸네일형 리스트형 [React] 라우터 총정리본 (이것만 보면 반은 먹고 들어간다! ) 더보기 [React] 라우터 (useNavigate, Navigate, Link 등) SPA ( Single Page Application ) : 하나의 페이지로 만들어진 어플리케이션 전통적 웹 어플리케이션 vs SPA SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용해서 처리한다 브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트해서 처리한다 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용된다 SPA의 단점 1️⃣ 앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 된다 2️⃣ 브라우저에서 렌더링이 완료되기 까지 비어있는 화면이 나오게 된다 3️⃣ 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리한다 (웹팩 설정 필요) 라우팅이란? 브라우저의 주소상태에 따라 다양한 화면을 보여주도.. 더보기 [React] Hook(훅) - useState, useEffect, useRef, useReducer 훅(HOOK) 이란? 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다 리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 함수형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라고 부른다 (useState, userEffect 등) 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다 Hook의 규칙 1️⃣ 최상위에서만 Hook을 호출해야 한다 2️⃣ 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안 된다 3️⃣이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다 4️⃣ 리액트 함수 컴포넌트에서만 Ho.. 더보기 [React] state와 이벤트 핸들링 state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다 state가 체인지 되면 변화를 감지하여 리렌더링을 수행한다 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다르다 함수형 컴포넌트에서는 Hook 개념을 이용해 더욱 쉽게 사용 가능하다 리액트에는 두 가지 종류의 state가 있다 1️⃣ 클래스형 컴포넌트가 지니고 있는 state 2️⃣ 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state //1st let data = useState('초기값'); console.log(data); // 배열이기 때문에 다음과 같이 출력 let a = data[0]; - 현재값 let b = data[1]; - 함수 //2nd let [data, setData] = useSt.. 더보기 [React] 리액트의 Components와 props Components ✅ 컴포넌트를 선언하는 방식은 두 가지가 있다 1️⃣ 함수 컴포넌트 2️⃣ 클래스형 컴포넌트 ✅ 컴포넌트는 여러 개일 수 있다 함수 컴포넌트 function Wlecome(props) { return Hello, {props.name} } 클래스형 컴포넌트 - render 함수가 반드시 있어야 함 class Welcome extends React.Component { render () { return Hello, {this.props.name} ; } } 그렇다면 이제 첫 컴포넌트 생성해봅시다! 1️⃣ 파일 만들기 2️⃣ 코드 작성하기 3️⃣ 모듈 내보내기 및 불러오기 src 디렉토리에 MyComponent.js 파일 생성하기 component 폴더 생성 👉 MyComponent.js.. 더보기 [React] JSX 문법 알고 싶으면 이리온 : ) 👩💻 본격적으로 JSX 문법에 대해 살펴보기 전에 리액트 코드를 먼저 살펴보고자 한다 1️⃣ index.js const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); root의 render 함수는 App 컴포넌트를 화면에 그리고, 함수 내부에 있는 는 옛날 기능을 사용할 때 경고를 출력하는 기능을 한다 2️⃣ App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export d.. 더보기 [React] 리액트 다운로드하고 실행시키기 Let's start React 리액트란? 리액트는 자바스크립트 라이브러리이다 ( 오직 view만 처리하는 라이브러리 ) SPA는 Single Page Application의 줄임말로 index.html 하나로만 로드하고 실행시키는 구조이다 어떻게 하나로만 가능하냐면... 번들러(WebPack)이 모든 것을 해주기 때문에 가능하다 Webpack은 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image등)을 하나로 묶어서 조합하여 경량화 해 결과물을 만들어 주는 도구이다 번들러는 node.JS를 통해 직접 설정할 수도 있지만, 리액트 프로젝트를 생성시에 자동으로 포함된다 DOM ( Document Object Model )란? HTML을 이해하기 쉽도록 트리 구조로 만들어진 태그(객체)들이.. 더보기 이전 1 다음
