React27 react-router, 라우트 경로에 특정값을 넣어보기(params, query) 개요 이번 포스트는, 라우트 경로에 특정값을 넣는 방법에 대해 알아 보겠다. 라우트 경로에 특정값을 넣는 방법은 2가지가 있다. params를 사용하는 것, query string을 사용 하는 것 이다. params : /about/choi query : /about?name=inho 활용방식은 다양하지만, 주로 params는 특정 id 또는 이름 등을 가지고 조회할 때 사용되며, query는 어떠한 키워드를 검색하거나 요청할때, 필요한 옵션을 전달할 때 사용된다. params 먼저 params의 사용법에 대해 알아보자. import React from "react"; import {BrowserRouter, Switch, Route} from "react-router-dom"; import Header.. 2022. 1. 10. react-router 간단히 사용해보기 react-router 간단히 사용해보기 개요 React 웹 어플리케이션을 개발할때, Client 사이드 라우팅을 위해 사용되는 리액트 라우터에 대해 알아보겠다. 라우팅에 대해 알아보기전 SPA(Single Page Application) 에 대한 개념을 짚고 넘어갈 필요가 있다. SPA(Single Page Application) 이란? 단일 페이지 어플리케이션(SPA)는 모던 웹 패러다임 이다. 기존의 웹사이트는 여러개의 html 파일로 구성되어 (a.html, b.html, c.html .....), 서버로 부터 요청하는 html 파일을 받아 화면에 구성되어있다. 또한, 페이지를 요청할때마다, 서버로 부터 받아오기 때문에, 페이지가 매번 새로고침 되었다. 이에 반면에 SPA는 한개의 HTML로 구성.. 2022. 1. 9. 리액트의 생명주기 life-cycle에 대하여 개요 이번 포스트에서는 React 컴포넌트의 life-cycle에 대해 알아보겠습니다. life-cycle(생명주기)는, 컴포넌트가 DOM위에 생성되기 전, 후 그리고 데이터가 변경되어 상태를 업데이트 하기 전, 후로 사용되는 메소드 들 입니다. life-cycle에 대한 개념들은 React 개발을 함에 있어 반드시 짚고 넘어가야하는 부분 입니다. React LifeCycle Diagram react v17.0.0 이후부터는 componentWillMount, componentWillUpdate, componentWillReceiveProps 메소드가 deprecated 됩니다. 자세히 알아보기 React LifeCycle에서 주로 사용되는 메소드들은 아래 내용과 같습니다. constructor rend.. 2022. 1. 7. 리액트 컴포넌트의 이벤트 연결(Binding)에 대하여 개요 이번 포스트에서는 React 컴포넌트에 이벤트를 연결하는 바인딩하는 법에 대해 알아 보겠습니다. 바인딩에 대해 알아보기전 javascript의 this의 개념에 대한 이해도가 필요합니다. 그 이유는 바인딩은 React만의 특수한 동작이 아니고, javascript에서 함수가 작동하는 방식이기 때문입니다. 참조: https://ko.reactjs.org/docs/faq-functions.html javascript 에서의 binding var obj = { title: "hello world", sayHello: function(){ console.log(this.title); } }; obj.sayHello(); // hello world 코드가 작동하면, 위의 결과는 console 에 "hello.. 2022. 1. 6. 이전 1 ··· 3 4 5 6 7 다음
