Front End/React
React SPA
SPA (Single Page Application)SPA의 장점SPA의 단점React에서의 Wireframe (컴포넌트 나누기)Routing?React RouterReact Router 주요 컴포넌트React Router 환경 세팅1. react-router 라이브러리 설치2. App.js에 react-router 컴포넌트 꺼내오기React Router 구현방법, useNavigateSPA (Single Page Application)웹페이지에서는 페이지를 유저에게 보여줄 때, 즉 페이지를 로딩할 때마다 서버에 미리 준비된 페이지를 전달받아 렌더링 했지만 규모가 커질수록 유저와의 상호작용이 많아지고 이에 따른 속도 저하 등의 문제가 발생했다. 이는 서버에 필요 이상의 트래픽을 발생시키는 것은 물론 유저..
React State & Props
Propsprops 사용 방법1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다2. props를 이용해 정의된 값과 속성을 전달한다3. 전달받은 props를 렌더링한다StateState hook, useStateuseState 사용법state 갱신하기주의점이벤트 처리자주 사용하는 이벤트 처리onChangeonClickControlled ComponentReact의 데이터 흐름개발은 상향식(bottom-up)으로데이터의 흐름은 하향식(top-bottom)으로데이터 정의, 속성(props)인가 상태(state)인가?상태(state)를 위치시키는 방법예시를 토대로 : “전체 트윗 목록” 데이터 위치시키기Props컴포넌트의 속성(property)을 의미한다. 사람으로 비유하자면 성별이나 이름처럼 변하지 ..