elice/WIL
[week_09] React 문법 | React-Router-Dom v6, useReducer, useContext
1. React-Router-Dom 라이브러리 v6 1-1. Routes, element Router ➡ Routes ➡ Route 구조로 구현하고, element props를 사용해서 렌더링할 컴포넌트를 전달한다. import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return ( ); } 1-2. useNavigate 특정 경로로 이동할 때는 useNavigate 훅을 사용한다. const navigate = useNavigate() navigate("/login") navigate("/login", {replace: true}) 1-3. path="*" SPA 라우팅에 걸러지지 않는 링크..
→2022.03.13
elice/WIL
[week_09] React 상태 관리
1. 상태 관리 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함 1-1. MPA와 SPA에서의 상태 관리 MPA: 서버의 데이터를 이용해 페이지를 렌더링 ➡ 클라이언트 데이터와 서버의 데이터가 큰 차이를 가지지 않는다. SPA: 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리. 그 외의 데이터는 클라이언트만의 데이터로 유지. 1-2. 상태 관리 기술이 해결하는 문제들 1) 데이터 캐싱과 재활용 SPA에서 페이지 로딩 시마다 모든 데이터를 로딩한다면, 사용자 경험 측면에서 MPA를 크게 넘어서기 힘들다. 변경이 잦은 데이터가 아니라면, 데이터를 캐싱하고 재활..
→2022.03.11
elice/WIL
[week_08] React 기초 Ⅱ(2) Hooks
1. Hook Hook은 컴포넌트에서 데이터를 관리(State)하고, 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. 앞서 학습한 useState가 바로 State Hook이다. Hook은 클래스 컴포넌트(Class Component)를 보완하고, 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에서 추가되었다. ✨ Hook 유의사항 1) Hook은 React함수(컴포넌트, Hook) 내에서만 사용 가능하다. 2) Hook의 이름은 반드시 'use'로 시작해야 한다. 3) 최상위 Level에서만 Hook을 호출할 수 있다. 즉, 컴포넌트 내에서 Hook을 사용할 때 반드시 첫번째 중괄호({ }) 안에서만 사용해야 한다. (👉 if문, for문 안쪽 또는 ..
→2022.03.02
elice/WIL
[week_08] React 기초 Ⅱ (1) 이벤트
1. 이벤트(event) 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 유저의 행동에 의해 발생할 수도 있고, 개발자가 의도한 로직에 의해 발생할 수도 있다. 이렇게 발생된 이벤트를 자바스크립트를 이용해서 대응할 수 있다. 이벤트 핸들러 함수를 사용해서 다양한 로직을 처리하고, 그 결과를 사용자에게 추력해서 알릴 수 있다. 1-1. 이벤트 처리(핸들링) 방법 const App = () => { const handleChange = (event) => { console.log("입력값 : " + event.target.value); } return ( ); }; DOM Element의 경우, 핸들링 함수에 이벤트 object를 매개변수로 전달한다. 이벤트 object를 활용해서 이벤..
→2022.03.02
elice/WIL
[week_08] React 기초 Ⅰ(4) React 프로젝트 생성
1. Create React App (CRA) React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 보일러플레이트(Boilerplate) Facebook에서 직접 만들어서 관리한다. 프로젝트 생성에 필요한 다양한 기능들을 Command로 제공한다. 1-1. Create React App (CRA)의 장점 1) 개발자가 온전히 React App 개발에 집중할 수 있도록 한다. 상대적으로 덜 중요한 코드는 노출되지 않는다. 강력한 Command를 지원한다. 2) (대부분의) 모든 브라우저에서 해석될 수 있도록 transcompile 지원 Babel 기본 내장 배포 시 코드 번들링 Webpack 기본 내장 2. Node.js / NPM 소개 Create React App으로 React 프로젝트 시작 시 No..
→2022.02.28
elice/WIL
[week_08] React 기초 Ⅰ(3) Props와 State
1. Props 기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없다. 주로 Component의 재사용을 위해 사용한다. /* 1. 컴포넌트 생성 */ const Welcome = (props) => { return Hello, {props.name} } /* 2. 컴포넌트 사용 */ const App = () => { return ; } Props는 읽기 전용이다. 따라서, Props 값을 변경해서 사용하고 싶다면 Props의 값을 임의로 변경해서 사용하는 것이 아니라, 새로운 변수를 생성해서 해당 값을 복제한 뒤 원하는 대로 변경해서 사용한다. 1-1. DOM Element의 Attributes ..
→2022.02.28
elice/WIL
[week_08] React 기초 Ⅰ(2) JSX와 컴포넌트
1. JSX 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장 HTML과 비슷하게 생겼으나 JavaScript이고, HTML과 다른 부분이 있다. JSX는 Babel에 의해서 Transcompile 된다. 1-1. JSX의 장점 1) 개발자 편의성 향상 2) 협업에 용이 / 생산성 향상 3) 문법 오류와 코드량 감소 1-2. JSX의 특징 (HTML과 차이점) 1) HTML 태그 내에 JavaScript 연산 const App = () => { const a = 3; const b = 6; return {a} + {b} = {a+b} } 2) class ➡ className ( {name}님 안녕하세요. ) 3) 스타일은 object로 작성 ( {name}님 안녕하세요. )..
→2022.02.28
elice/WIL
[week_08] React 기초 Ⅰ(1) OT
1. SPA (Single Page Application) 클라이언트가 서버로 최초 접속 요청을 보내면, 서버로부터 HTML을 전달 받는다. 그 후 페이지의 변경이 필요할 때 변경이 필요한 부분을 JSON으로 전달 받는다. 이 때, 페이지에서 변경된 부분만 계산하여 다시 그리게 된다. (전통적인 페이지의 경우, 변경이 있을 때마다 HTML을 새로 받아서 페이지를 처음부터 다시 그림) 👉 React를 사용하게 되면 이러한 행위를 편리하게 할 수 있다! 2. React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 Component : React의 독립적인 단위 Virtual DOM : 가상적인 표현을 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로..
→2022.02.28

• 이전
• 1
• 2
• 3
• 다음