Frontend (46) 썸네일형 리스트형 2021-05-03 :: 리액트 라우터로 SPA 개발하기3 withRouter withRouter 함수는 HoC(higher-order Component)이다. 라우트로 사용된 컴포넌트가 아니어도 match, location, history 객체를 접근할 수 있게 해 준다. import React from 'react'; import {withRouter} from 'react-router-dom'; const WithRouterSample = ({location, match, history}) => { return( location match history.push('/')}>홈으로 ); } export default withRouter(WithRouterSample); JSON.stringify의 두 번째 파라미터와 세 번째 파라미터를 위와 같이 null, .. 2021-04-30 :: 리액트 라우터로 SPA 개발하기2 URL 쿼리 이번에는 About 페에지에서 쿼리를 받아 오겠습니다. 쿼리는 location 객체에 들어 있는 search 값에서 조회할 수 있다. location 객체는 라우트로 사용된 컴포넌트에게 props로 전달되며, 웹 어플리케이션의 현재 주소에 대한 정보를 지니고 있다. location의 형태는 다음과 같다. { "pathname": "/about", "search": "?detail=true", "hash": " " } 위 location 객체는 URL/about?deatail=true 주소로 들어갔을 때의 값이다. URL 쿼리를 읽을 때는 위 객체가 지닌 값 중에서 search 값을 확인해야 한다. 이 값은 문자열 형태로 되어 있다. 또한 URL 쿼리는 ?detail=true&another=1.. 2021-04-23 :: 리액트 라우터로 SPA 개발하기 SPA란? SPA는 Single Page Application의 약어이다. 말 그대로 한 개의 페이지로 이루어진 어플리케이션이라는 뜻을 가지고 있다. 전통적인 웹 페이지에는 다음과 같이 여러 페이지로 구성되어 있다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 왔다. 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 기존처럼 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. 그래서 리액트 같은 라이브러리를 사용해 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 새로운 데이터가 필요한 경우에만 서버 API를 호출하여 로드한다. 리액트 라우팅 라이브러리로는 리액트 라우터, 리치 라우터, Next.js등이 있다. SPA의 단점 SPA의 단점은 앱의 규모가 커지면 자바.. 2021-04-12 :: 컴포넌트 스타일링 이 장에서 배워볼 스타일링 방식은 다음과 같다. 일반 CSS: 컴포넌트를 스타일링 하는 가장 기본적인 방식 Sass: 자주 사용되는 CSS전처리기 중 하나로 확장된 CSS문법을 사용하여 CSS문법을 더욱 쉽게 작성할 수 있다. CSS Module: 스타일을 작성할 때 CSS클래스가 다른 CSS클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션이다. styled-component: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 9.1 일반 CSS CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다. 이를 위해서는 이름을 지을 때 특별한 규칙을 사용하거나 CSS .. 2020-04-08 :: ref: DOM에 이름 달기 다음과 같이 요소에 id 프로퍼티를 달 수 있다. 이를 통해 css를 적용하거나 DOM 요소에 작업을 할 수 있다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. ref가 그 방법이다. 리액트 컴포넌트 안에서 id를 사용하면 안되는가? 사용은 가능하다. 실제로 DOM에서 컴포넌트를 랜더링할 때 id가 그대로 전달이 된다. 하지만 컴포넌트를 여러 번 사용하는 경우를 생각 해보자. HTML에서 id는 유일해야하지만, 이 경우에는 DOM의 id가 중복되므로 잘못된 사용이 된다. 반면 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 위와 같은 문제가 발생하지 않는다. 5.1 ref는 어떤 상황에서 사용해야 할까?.. 2021-04-05 :: Hooks2 8.4 use Memo useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다. 숫자를 등록할 때뿐만 아니라 인풋 내용이 수정될 때도 우리가 만든 getAverage 함수가 호출되는 것을 확인 할 수 있다. useMemo를 사용하면 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다. import React, {useState, useMemo} from 'react'; const getAverage = numbers => { console.log('계산중..'); if(numbers.length === 0) return 0; const sum = numbers.reduce((a, b)=> .. 2021-04-05 :: Hooks1 Hooks는 리액트 v16.8에 새로 도입되어 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 8.1 useState useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 기존 클래스형 컴포넌트의 this.state와 같은 기능을 한다고 볼 수 있다. useState는 다음과 같이 사용한다. const [value, setValue] = useState(0); useState 함수의 파라미터에는 state의 기본값을 넣어 준다. 위의 경우에는 기본값을 0으로 두겠다는 의미가 된다. 이 함수는 배.. 2020-12-07 :: Event Handling 리액트의 이벤트 시스템 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성한다. 이벤트 실행을 지정할 때 자바스크립트 코드가 아닌 함수 형태의 값을 전달한다. DOM요소에만 이벤트를 적용할 수 있다. ⇒ 컴포넌트에 자체적으로 이벤트를 설정할 수는 없다. 하지만 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 수는 있다. 예제로 이벤트 핸들링 익히기 **onChange = { (e) => { console.log(e.target.value); } }** e 객체는 SyntheticEvent로 웹 브러우저의 네이티브 이벤트를 감싸는 개체이다. 입력값을 추출하고 싶다면 e.target.value를 통해 접근하도록 하자. state에 input 담기 & 버튼을 누를 때 message 값.. 이전 1 2 3 4 5 6 다음