React50 [React] Router 를 사용하여 페이지 접근하기-떽떽대는 개발공부 Single Page Application(SPA) 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지에 컴포넌트를 통해 동적으로 다시 작성하여 클라이언트와 소통하는 웹 애플리케이션이다. 필요한 모든 소스는 하나의 페이지에서 새로고침 없이 동작하게 된다. 그러나, SPA를 기반으로 개발할 때 흔히 겪는 어려움 중 하나는 웹페이지의 라우팅이다. 기본적으로 SPA에서 라우팅을 구현하게 되면 url path가 아닌 현재 어떤 컴포넌트가 렌더링 되어야 하는지 state를 통하여 관리를 한다. 이렇게 되면 다음과 같은 문제가 발생하게 된다. 1. 컴포넌트가 전환되어도 브라우저 주소창의 URL은 고정되어 있기 때문에 특정 페이지에 대한 즐겨찾기 등록이 불가능하다. 2. 뒤로가기 버튼을 누르면 해당 앱 내에서 이.. 2021. 1. 4. [React] a태그 사용해서 페이지 이동 및 함수 호출하기-떽떽대는 개발공부 2021/01/01 - [React] - [React] Component 에서 State 사용하기 [React] Component 에서 State 사용하기 2020/12/31 - [React] - [React] Component 에서 props 사용하기 [React] Component 에서 props 사용하기 2020/12/31 - [React] - [React] Component 생성하고 모듈화하기 [React] Component 생성하고 모듈화하기.. ddeck.tistory.com a 태그 사용으로 페이지 이동 페이지 이동을 구현할 때 가장 일반적으로 사용하는 것이 바로 a 태그이다. react 에서도 아래와 같이 a 태그를 이용하여 페이지 이동이 가능하다. src/components/App.js .. 2021. 1. 2. [React] Component 에서 State 사용하기-떽떽대는 개발공부 2020/12/31 - [React] - [React] Component 에서 props 사용하기 [React] Component 에서 props 사용하기 2020/12/31 - [React] - [React] Component 생성하고 모듈화하기 [React] Component 생성하고 모듈화하기 2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기 Component 생성 및 모듈화 이전 글에서 프로.. ddeck.tistory.com Component 에서 State 사용하기 컴포넌트에서 유동적인 데이터를 다룰 때, state 를 사용한다. React.js 어플리케이션을 만들 땐, state를 사용하는 컴포넌트의 갯수를 최소화 해야한다. 예를들어, 10 개의 컴포넌트에서 .. 2021. 1. 1. [React] Component 에서 props 사용하기-떽떽대는 개발공부 2020/12/31 - [React] - [React] Component 생성하고 모듈화하기 [React] Component 생성하고 모듈화하기 2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기 Component 생성 및 모듈화 이전 글에서 프로젝트를 생성했다면 이제 component를 생성하여 프로젝트를 진행할 수 있다. src/index.js import React fr.. ddeck.tistory.com props props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용한다. parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용된다. props 추가하기 컴포넌트에서 변하지 않는 데이터가 필요 할 땐, rend.. 2020. 12. 31. 이전 1 ··· 9 10 11 12 13 다음
