허도경, limewhale

React에서 스타일을 지정하는 방법에는 여러 방법이 있지만 가장 많이 사랑받는 방법 중 하나가 바로 styled-components입니다. 그런데 Styled Components 라이브러리를 TypeScript로 전환하면서 같이 사용하기 위해서는 약간의 방법이 추가로 필요합니다. 1. 유형 설치 Styled Components 라이브러리는 유형과 함께 제공되지 않습니다. 확실한 유형이 지정된 저장소에서 설치해야 합니다. npm i --save-dev @types/styled-components 2. 스타일 작성하기 😊 단일 props 사용 시 CSS-in-JS 솔루션을 사용하는 주요 이점 중 하나는 사용자가 자신에게 필요한 값을 Props로 전달하고 그에 따라 CSS를 조정할 수 있다는 것입니다. 컴포..

리액트를 공부하면서 클론 코딩이나 기타 코드를 연습하면서 Github에 소스를 배포하고 관리하고 싶을 거라 생각합니다. git으로 코드를 관리하면 소스의 history를 알 수 있을 뿐 아니라 어느곳에서나 자신이 만든 소스를 다운로드하고 다시 커밋하여 반영할 수 있기 때문에 git으로 소스를 관리하면 굉장히 유용합니다. gh-page 플러그인을 이용하면 웹 사이트에 접속하는 것처럼 자신이 만든 프로젝트 사이트를 소스코드가 아닌 웹 화면으로도 접속할 수 있습니다. 더욱이 이 모든 게 무료로 호스팅을 제공합니다. 이제부터 그 방법을 알아보려고 합니다. 너무나 당연한 이야기지만 Github에 소스를 배포하려면 Github에 회원가입이 되어 있어야 합니다. 만약 회원가입이 되어 있지 않다면 회원가입부터 우선적으..

useHistory란? useHistory를 사용하면, 페이지 방문 기록을 쉽게 관리할 수 있으며 여러가지 내장 함수를 사용해 뒤로가기, 특정 페이지로 이동하기 등을 구현할 수 있습니다. 이 hook을 사용하려면 리액트 16.8 버전 이상이어야 합니다. 1. goBack() 사용하여 뒤로가기 useHistory 내장 함수인 goBack을 사용하면 뒤로가기를 쉽게 구현할 수 있습니다. 1) useHistory를 import import React from 'react' // 요기 import { useHistory } from 'react-router-dom'; function Login() { return ( 로그인 페이지입니다. 로그인 뒤로가기 ) } export default Login 2) 변수를 ..

안녕하세요! 오늘은 제가 프로젝트들을 진행해오면서 편리함을 느꼈던 react-router-dom의 유용한 hooks들에 대해서 소개하려고 합니다. 리액트 라우터가 웹 내에서 단순 페이지 라우팅을 하기도 하지만 URL에서의 도움을 많이 주는 라우터 라이브러리라고 생각합니다. 아래에는 총 3가지의 hooks들이 있습니다. react-router-dom 5.1v 부터 hooks들이 지원이 됩니다. react-router-dom을 설치하는 과정은 두 개 중 하나를 선택하여 터미널에 입력합니다 1. yarn add react-router-dom 2. npm install react-router-dom 1. useHistory 대부분의 react-router-dom을 이용한 리액트 프로젝트의 App.tsx는 아래와..

TypeScript가 미 적용되어 있던 프로젝트를 타입 스크립트를 적용하고 페이지의 스타일을 Import하니 에러가 호출되었습니다. 우리가 일반적으로 React에서 사용하는 스타일을 Import 하는 방식은 아래와 같습니다. import styles from "./App.module.scss"; 하지만 위의 방식으로 스타일을 불러오게 되면TypeScript를 사용할 때 module.scss(혹은 module.css 등)를 import 하게 되면 [ './App.module.scss' 모듈 또는 해당 형식 선언을 찾을 수 없습니다. ]와 같은 에러를 발생시키는데 이 에러는 스타일을 module로 import 할 때만 발생하며, 아래와 같이 스타일을 import 할 때는 발생하지 않습니다. import "...

리액트에서 Link에 state를 이용하여 이동하는 페이지에 특정값을 전달할 수 있습니다. 전달받은 페이지에서는 'useLocation' 항목을 이용하여 해당 값을 받아올 수 있는데 이 부분을 TypeScript를 적용하게 되면 오류가 발생하게 됩니다. 전달받은 값에 대한 타입이 지정되지 않았기 때문인데 이 부분을 쉽게 설명하고 해결하는 방법이 있어서 공유합니다. State를 이용하여 값 전달

이전에 스스로 공부하면서 만들었던 리액트 프로젝트를 타입 스크립트도 공부할 목적으로 타입 스크립트를 적용하였습니다. 타입 스크립트를 사용하기 전에는 단순히 값의 형태만 정의해주면 되는 건데.. 뭐가 이렇게 요즘 핫한 거지?라는 생각으로 접근을 했습니다만.. 실제로 타입스크립트를 적용하면서 처음에 제가 생각한 부분은 많이 단순한 생각이었다는 것을 처참히 느낄 수 있었습니다. 서론은 각설하고 React에서 useRef를 사용하였던 부분이 Error가 발생하여 이유를 찾아보았는데 처음 제가 useRef(null)로 선언한 값이 Object is possibly 'null'이라는 타입 스크립트 오류가 났습니다. 해결방법은 useRef에 type값을 any로 정의해주면 해결되었습니다. typescript를 쓰는 ..

리액트에서 클릭 이벤트 시 필요한 값을 매개변수로 전달할 때 일반적으로 자바스크립트에서 사용하던 방식으로 전달하게 되면 원하는 결과가 발생되지 않습니다. 만약 일반적인 방식처럼 작성한다면 리액트는 화면이 Render 되면서 계속해서 이벤트가 발생되기 때문에 우리가 원하는 특정 이벤트일 때 결과를 얻는 이벤트는 적용할 수 없습니다. 그래서 우리가 원하는 결과를 위해서는 화살표 함수로 감싸서 전달해야 우리가 원하는 클릭 이벤트가 발생했을 때 원하는 매개변수 값을 확인할 수 있습니다. 보다 이해가 쉽게 코드를 보면서 살펴볼게요. 예제 코드 import React from 'react'; const Example = () => { function sayHello(name) { alert(name); } retu..

ES6 내용 중 이전에 정리를 했었지만 스스로 제대로 이해를 하지 못하고 있는 거 같아서 다시 한번 내용을 정리해 보려 합니다. 구조 분해 할당이란 배열이나 객체의 값을 원하는 개별 변수에 할당할 수 있습니다. 💡 Before : 배열/객체 데이터를 가져오는 방법 // 배열 let array = ["멍멍이", "냥냥이"]; let name1 = array[0]; let name2 = array[1]; // 객체 const animal = { name: '멍멍이', color: 'white' }; const name = animal.name; const color = animal.color; 💡 After : destructuring으로 배열/객체 데이터 가져오는 방법 // 배열 let [name1, na..

요즘 웹 대부분은 테마가 기본적으로 적용되어 있어서 사용자의 편의에 맞게 다크 모드, 라이트 모드로 화면을 볼 수 있는 편의성을 제공하고 있습니다. React로도 이 두가지 테마 모드를 쉽게 적용할 수 있는데 오늘 이 방법을 정리해보려고 합니다. ✏️ styled-components React에서 다양한 방법으로 테마 모드를 적용할 수 있겠지만 styled-components를 이용하여 테마 모드를 적용하는 방법을 알아보려고 합니다. styled-components 설치 > npm i styled-components > npm i @types/styled-components // typescript 사용시 styled-components가 설치되어 있지 않다면 우선 터미널을 통해 styled-compon..