Front End/React
-
[React] withRouter & JS로 SPA 방식 라우팅Front End/React 2021. 10. 12. 16:02
# withRouter Higher-order Component 로 라우터에 의해서 호출된 컴포넌트가 아니어도 match, location, history 객체에 접근 가능하게 해준다. 하위 컴포넌트에서 상위 계층간의 거리가 멀어도 match, location, history를 안전하게 받을 수 있다. (props 로 열심히 전달하지 않아도 된다.) # JS로 SPA 방식으로 라우팅하기 + withRouter 사용 예시 로 넘겨 줘도 되나, 계층간의 거리가 멀어지면 해당방식은 오류의 근원이 됨. // src/pages/Login.jsx import LoginButton from '../components/LoginButton'; export default function Login() { return (..
-
[React] 라우팅 (Route, Link, NavLink, Switch) + QueryParameterFront End/React 2021. 10. 12. 14:18
# • path : 해당 path 에 접근 시, 설정된 component나 render 함수를 실행 * :변수명 을 사용하여 변수를 URL에 삽입가능 • keyword exact : 정확히 path에 일치할때만 component 를 render • component : 해당 path 에 접근 시, component render • render : 인자로 함수를 받으며, 해당 path에 접근 시, render 함수 실행 (따라서, 논리연산이 필요한 작업은 render를 사용) * component 와 render를 같이 사용 시, component가 우선권을 가져 render는 실행되지 않음 # • html의 a 태그(anchor)를 조작하여, 해당 URL로 진입시 서버에서 리소스를 리로딩하지 않고 SPA..
-
[React] 리액트의 라우팅과 SPA(Single Page Application)Front End/React 2021. 10. 12. 13:47
# SPA(Single Page Application) SPA 가 아닌 Application 은 Client인 Browser 에서 서버에 지속적으로 요청하여 새로운 리소스들을 불러옴 SPA 는 필요한 리소스들을 초기에 한번에 불러오고 난 후, 라우팅등이 발생하면 Client(Browser) 단에서 동적으로 페이지를 작성하여 서버의 부하를 줄여주며, 서버로 부터 리소스를 받는 작업들을 줄이기 때문에 페이지의 반응도 빨라짐. SPA 에서는 Form 태그를 지양 # 라우팅 (Routing) • react-router-dom 을 이용하여 라우팅을 한다. (create-react-app 에 내장된 패키지가 아님, 따라서 설치 필요) • Facebook 공식 패키지는 아니나, 가장 대표적인 리액트 라우팅 패키지. ..
-
[React] 유용한 리액트 관련 익스텐션 및 플러그인 모음Front End/React 2021. 10. 12. 13:18
1. React Developer Tools (Chrom Extension) - 크롬 개발자 도구 수준에서 react-component 제어 가능 React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 20ca9b565 on 10/8/2021. chrome.google.com 2. ESLint - create-react-app 에 설치된 내장기능 - 사용자가 정의한 규칙대로 js파일이 작성되었는지 확인해줌 - VScode 또는 node.js 로 따로 설치가능 ESLint - Pluggable JavaScript linter Customize Preprocess code, use ..
-
[React] React Hooks 의 사용 이유Front End/React 2021. 9. 24. 15:42
# React Hooks 배포 이전 Component 내부에 state가 있다? => Class 로 구현 Component 내부에 state가 없다? + Life-cycle 을 사용해야 한다? => Class 로 구현 Component 내부에 state가 없다? + Life-cycle 과 관계 없다? => function 으로 구현 * Hooks 이전에는 function component 를 stateless functional component 라 명명했었음. # Hooks 이후 function 으로도 state를 사용할 수 있게 됨. => 코드생산성 증가 # Reference - https://ko.reactjs.org/docs/hooks-intro.html#gatsby-focus-wrapper Ho..
-
[React] React 동작원리를 이해하자, Babel, JSX 없이 사용하는 ReactFront End/React 2021. 9. 24. 15:14
# JSX 란 ? - React에서 사용하는 자바스크립트 확장문법이다. - 각종 컴파일도구(Babel compiler)들로 인해 브라우저에서 실행되기전에 JSX는 자바스크립트로 변환된다. - 컴파일도구의 힘을 빌리기 때문에, 문법적오류를 잡아내기도 쉬우며, 가독성도 좋아지는 장점이 있다. # 그렇다면 JSX를 사용하지않고, 순수 자바스크립트로만 React를 사용 가능할까? - 그렇다. JSX는 자바스크립트로 구현이 되어있기 때문에 가능하다. # React 를 사용하는 이유? - Virtual DOM 을 이용한 컴퓨터 자원 사용효율에 대한 우위 (실제 HTML과 변경된 HTML의 차이점만 반영) - Virtual DOM 을 이용하기 위해서는, React를 사용해야하고 그에 맞게 요구되는 React-Elem..
-
[React] React & React-native & React HookFront End/React 2021. 8. 31. 16:43
# React - 웹 어플리케이션 만드는 JS 프레임워크 - JSX(JS extension) 문법 사용 (때문에 JS 문법으로 변환시키는 컴파일과정이 필요) ex) const hello = Hi; # React Hook - React 16.8 version 부터 추가 된 react element # React Native - iOS, Android 네이티브 어플케이션 만드는 JS 프레임워크 # Reference - react hook : https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org
-
리액트 AwesomeFont 사용하기 ( i 태그로 사용하기 )Front End/React 2021. 8. 20. 17:54
1. 많은 블로거들이 포스팅 해 놓은 방법 - AwesomeFont를 객체화 해서 사용 - 내부구조 다 공부할 수 있으면 사용하기 - Reference) https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 2. i 태그에 class 명만 주면 사용 할 수 있는 방법 (기존방식) - css 파일을 import 하는 거기 때문에 기존 html, javaScript 에서 하던대로 사용 가능..