웹 개발/React (38) 썸네일형 리스트형 React) styled-component에 props 값 (변수) 사용하기 example import styled from "styled-components"; const StyledDiv = styled.div` width: ${props => `${props.xs * 24}px`} ; padding: ${props => props.padding || 0}; ... `; export default function Example({ children, xs, padding }) { return ( {children} ); } props 값을 styledDiv로 전달해서 사용하고 적용된 값이 없다면 || 두번째 값이 디폴트로 적용되는 것 React) react-router-dom 특정 경로에서만 특정 컴포넌트 랜더링 되게 하기 React) react-router-dom 특정 경로에서만 특정 컴포넌트 랜더링 되게 하기 저는 주로 프로젝트의 최상위 요소인 App 요소ㄹㄹ BrowerRouter로 만들어 사용하는데 이때, Header 와 Footer는 모든 경로에서 고정된 위치에 있게 하기 위해서 Route로 설정하지 않고 그냥 최상단에 header를 최하단에 footer를 위치시켰습니다. 그런데 하다보니 특정 path에서 footer를 렌더링하고 싶지 않아져서 고민하다가 찾아낸 방법을 공유합니다. import React from 'react'; import { BrowserRouter, Route } from 'react-router-dom'; import Header from './static/component/header'; .. React) fullpage.js처럼 CSS scroll-snap 속성으로 스크롤 조작 완료 시 특정 위치/오프셋 설정하기 scroll-snap fullPage scroll snapping. Create full screen pages fast and simple Mouse wheel snap to sections. Fast and simple to use. alvarotrigo.com 위 fullpage.js 확장 프로그램 예시처럼 사용자가 스크롤을 조작하면 자연스럽게 특정 위치 (예를 들면 어떤 컴포넌트의 최상위) 에 정확하게 이동한다면 사용자 경험이 향상될 거라 판단해서 기존에 하고 있는 프로젝트에 이 기능을 추가하려고 했습니다. 그러나 fullpage.js 확장 프로그램은 유료라서 다른 방법을 찾다가 발견한 방법은 CSS의 scroll-snap 속성을 이용하는 것입니다. scroll-snap에 대한 설명은 링크 를 참.. React) 내가 보려고 쓰는 React-Redux 코드 작성 단계 요약 React-Redux 코드 작성 단계 요약 1. 필요한 패키지 설치 ... $ npm install redux --save $ npm install react-redux --save $ npm install react-actions --save // option $ npm install redux-devtools-extension --save 2. reducer 만들기 리듀서를 정의한 파일들은 modules라는 폴더에 모아둡니다. modules/component.js import { createAction, handleActions } from 'redux-actions'; 사용할 action type을 다음과 같은 형식으로 선언해 줍니다. 예시는 counter 라는 컴포넌트에서 INCREASE와 DEC.. React) Redux DevTools 사용하기 Redux DevTools 설치 Redux DevTools는 규모가 큰 웹/어플리케이션의 효율적인 상태 관리를 위해 사용되는 redux를 위한 개발자 도구입니다. 이는 아래 링크에서 크롬 익스텐션을 설치하여 사용할 수 있습니다. Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com React 프로젝트에서 Redux DevTools 사용 아래 명령어로 패키지를 설치합니다. npm install redux-devtools-extension --save redux store를 createStore를 통해 선언하는 파일에 componseWithDevTools를 임포트해오고, import { compose.. React) react-router-dom : NavLink 로 활성화된 버튼 active style 적용하기 react-router-dom : NavLink react-router-dom을 이용할 때, to attribute에 설정된 path로 이동시켜주는 Link는 css 가상선택자로 스타일을 적용할 수 없어서 그냥 정적인 스타일로 두었습니다. 그런데 NavLink를 사용하면 active에 적용되는 스타일을 따로 적용할 수있게 됩니다. How to use 우선 react-router-dom 모듈에서 NavLink를 임포트 합니다. import { NavLink } from 'react-router-dom'; 그리고 active 된 링크에 적용할 스타일을 정의합니다. const activeStyle= { background: 'grey', color: 'white' } 정의한 스타일을 NavLink의 activ.. React) 불변성 React Component의 불변성 불변성이란, 기존의 값을 수정하지 않는 것을 말합니다. 리액트 컴포넌트는 상태가 변하더라도 이 기존의 값을 수정하지 않고, (불변성을 지키면서) 새로운 값을 만들어내도록 해야 합니다. 그래서 기존의 데이터에 변화가 필요할 떄 직접 그 데이터를 수정하지 않고, 해당 데이터를 복사 후 수정하여 새로운 객체로 만들어줍니다. Example 다음 예시에서는 newArray에 array를 복사하여 새로운 객체를 할당한 것이 아니라 newArray로 array의 이름만 바꾼 것이라고 생각하시면 됩니다. 그래서 newArray의 요소에 직접 접근하여 수정을 한 것이 array에도 마찬가지로 반영이 되어 [0] 번 요소를 바꾼 뒤에도 array와 newArray가 같다는 결과가 나옵.. React) react-icons 사용법 react-icons react-icons 설치 React 프로젝트의 package.json이 있는 폴더에서 터미널을 열고 다음 명령어를 입력합니다. npm install react-icons --save 완료되면 package.json을 열어 설치가 잘 되었는지 확인합니다. 설치가 잘 되었다면 package.json 파일의 dependencies 내부에 다음과 같은 값이 추가되었을 것입니다. 사용할 아이콘 선택 이 사이트에서 사용하고 싶은 아이콘을 선택합니다. React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you .. 이전 1 2 3 4 5 다음
