with with

리액트 프로젝트의 크기가 커질수록, 태그의 양이 많아질수록 점점 더 태그 트리구조를 파악하기 힘들어질 뿐더러, css와 class 이름 붙이기도 힘들어진다. 하지만, styled-components만 있으면 그런걱정 끝! styled-components - 공식 문서 페이지 styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 ...공식 사이트 최상단에 나와있는 문구이다. 그런데, 정말 말대로 스트레스가 확 ..

useState의 사용이 익숙해질 무렵, 한 가지 불편함을 느꼈다. 부모 컴포넌트에서 자식 컴포넌트로 useState안의 값을 넘겨줘야 하는 경우, 부모-자식이 한 두 단계정도 떨어져 있을 때는 상관이 없는데, 3회 이상 상속을 시켜줘야 하는 경우에는 불편함이 많았다. 이 때, recoil을 알게 되었고, 불편함이 바로 해소되었다..! recoil - 공식 문서 페이지 설치 | Recoil NPM recoiljs.org recoil은 리액트를 위한 상태관리 라이브러리로, 기존에 쓰던 useState가 지역변수 같은 느낌이었다면, recoil은 전역변수 같은 느낌이었다. 그럴만 한게, recoil은 상태를 별도의 코드 파일로 작성하고, 어떠한 컴포넌트 파일에서 상태값을 불러오고, 수정할 수 있게 해준다. ..

깃허브 페이지에 배포하는 방법과 내가 겪었던 자잘한 버그(?) 상황과 그에 대한 해결법을 소개하고자 한다. 우선 아래의 사진과 같이 깃허브 페이지에 배포하는 방법이다. 그 전에 리액트의 빌드 과정을 간략하게 설명하자면, npm run build 커맨드를 실행시 리액트에서는 react-scripts build 스크립트를 실행한다. 그러면 전에 없던 build라는 폴더가 생기는데, 그 폴더 안에는 우리가 src 폴더 안에서 작업했던 내용이 최적화된 빌드 파일이 들어가게 되고, 그 빌드 파일을 배포하는 것이다. 빌드한 후에는 npm run deploy 커맨드를 실행하게 되면 gh-pages -d build 커맨드가 실행되는데 build 폴더를 gh-pages로 deploy한다는 의미로 생각하면 될 거 같다. ..

react-router-dom (v5.3.0 기준) useLocation hook은 브라우저 주소와 path property에 입력된 주소와 일치하는지를 검사한다. 만약 브라우저 주소와 useLocation(path: string)의 path property가 일치하면 해당 path의 match 객체를 반환하고, 일치하지 않는 경우에는 null을 반환한다. 이를 이용하면 중첩 Route에서 탭을 구현할 수 있다. 다음의 코드를 살펴보자. const Tab = styled.span` text-align: center; text-transform: uppercase; font-size: 12px; font-weight: 400; background-color: rgba(0, 0, 0, 0.5); paddin..

react-router-dom (v5.3.0 기준) useLocation hook은 동적인 현 위치의 객체를 반환한다. 무엇보다, useLocation을 사용하는 주된 내용은 페이지 전환시 데이터를 보낼 수 있다는 것이다. 을 보면 state에 객체가 들어가 있는데, 이 객체에 이전 페이지에서 보내고 싶은 데이터를 담아 다음 페이지로 보내면, useLocation을 통해 보낸 데이터를 받을 수 있다. 이 방법을 이용하면, 로딩 중에도 특정 데이터는 사용자에게 보여줄 수 있기 때문에 사용자 경험이 증대된다. 데이터를 보내는 방법은 아래의 코드를 참고하자. // Coins.tsx // Coin.tsx const { state } = useLocation(); Coins.tsx에서 Link to를 통해 sta..

react-router-dom (v5.3.0 기준) useParams hook은 동적으로 움직이는 주소창에 있는 내용중 일부를 반환해준다. 반환하는 내용은 ... 에 있는 params를 반환해준다. 예로 들어 아래의 코드가 있다고 가정해보자. // Router.tsx // Coins.tsx // Coin.tsx const { coinId } = useParams(); Router.tsx에서 Route path의 형식을 /:coinId 라고 지정해줬다. 따라서 Coin.tsx에서 useParams를 이용해 받는 객체에서 키 이름은 coinId가 된다. 또한, Coins.tsx에서 Link to를 통해 코인 아이디 값을 넘겨준다. 만약 넘겨주는 값이 eth-ethereum 이라면, Coin.tsx에서 받는 ..

reart-query 라이브러리에서 제공하는 useQuery hook는 api 호출의 과정을 간략화 해줄 뿐만 아니라, 캐싱을 이용해 api호출의 빈도를 최소화한다. useQuery를 사용하기 이전에 api를 호출하려면 다음과 같이 코드를 작성해야 했다. const [loading, setLoading] = useState(true); const { coinId } = useParams(); const [info, setInfo] = useState(); const [priceInfo, setPriceInfo] = useState(); useEffect(() => { (async () => { const infoData = await ( await fetch(`https://api.coinpaprika...

리엑트를 사용하면 개발자를 위한 여러 라이브러리가 많이 제공되고 있기 때문에 프로젝트를 본격적으로 진행하기 전에 미리 필요한 라이브러리를 설치하여 준비하는 것이 좋다. 아래에는 리엑트 프로젝트 만들 때 기본적으로 세팅하면 편한 라이브러리를 정리한다. 1. 리엑트 프로젝트 생성 리엑트는 다음의 커맨드로 typescript 기반 프로젝트를 생성하는 것이 좋다. npx create-react-app --template typescript ts는 처음 사용하면 미리 지정해줘야 하는게 많아 자칫 귀찮게 생각할 수 있지만, 나중에 자동완성 기능이나, 런타임 이전에 에러를 발견하고 해결할 수 있다는 장점이 더 크기 때문에 사용하는게 좋다. 2. (option) 필요없는 파일 삭제 /src 폴더에 기본적으로 들어있는 ..