Web Front End/React

[React + TS + styled-component] 다크모드 적용하기

[React + TS + styled-component] 다크모드 적용하기 화면 노출이 증가함에 따라 다크모드를 지원하는 운영체제와 사이트가 증가하고 있습니다. 이번 포스팅에서는 React + TypeScript + styled-component 환경에서 custom hook을 사용해 다크모드를 적용하는 방법을 얘기하려고 합니다. 전체 코드: Github Link 예제 데모 링크: Demo 개요 전체 구조 스타일 테마 타입 정의 및 객체 생성 테마 모드를 관리하는 custom hook 작성 custom hook을 사용하여 토글 버튼 생성 1. 전체 구조 이번 포스팅에서 주로 사용하는 코드의 구조는 아래와 같습니다. 전체 환경설정은 Github 링크에서 확인하실 수 있습니다. . ├── src │ ├── ..

[React] 환경설정 제대로 알고 하기 (without CRA) ①

[React] 환경설정 제대로 알고 하기 (without CRA) ① CRA(create-react-app)은 강력하고 편리하지만, 환경설정을 커스텀해서 사용하다가 전체가 어그러지는 상황이 올 수 있어 어렵습니다. 이번 포스팅에서는 초심자로서 CRA를 사용하지 않고 환경 설정하는 방법을 개괄적으로 설명하려고 합니다. 참고: 함수형 컴포넌트 기반으로 구성되었습니다. 2편 보기 : https://egg-programmer.tistory.com/280 참고한 환경설정 처음 환경설정을 시작할 때는 아래에 잘 정리된 설정을 따라 해 보면서 완성했습니다. 한번 잘 동작하는 것을 만들어 두면 다른 프로젝트에서는 조건에 맞게 가감할 수 있다고 생각합니다. 참고한 환경설정을 바탕으로 이해하고 쓰는 저만의 boilerpl..

[React + Emotion] 리액트에 글로벌 스타일 적용하기

Emotion 라이브러리를 사용해 reset.css를 적용할 수 있는 글로벌 스타일을 적용시키는 방법을 포스팅하려 한다. 1. [reset.jsx] html 기본 스타일을 없애주는 reset.css 스타일을 아래와 같이 넣고 저장한다. reset.css는 https://meyerweb.com/eric/tools/css/reset/ 를 참고해서 넣어주면 된다. 스크린샷에는 일부만 포함시켰다. 2. [App.js] 위의 리셋 스타일이 담긴 Reset.jsx를 import한다. emotion 에서 Global을 import한다. div 태그 안에 을 넣어 준다. Global 태그 아래로 다른 컴포넌트를 넣어주면 Global style이 적용된다.

[React] create-react-app(CRA)의 마법

리액트를 가장 빠르게 시작하는 방법 3가지 1. npx create-react-app my-app 2. npm init react-app my-app 3. yarn create react-app my-app 위의 세 가지 중 하나의 명령어를 입력하면 create-react-app이 설치가 시작돼 마법이 펼쳐진다. webpack, babel 등의 환경 설정을 따로 하지 않아도 바로 리액트로 개발을 시작할 수 있게 된다. 물론 서비스를 만드는 회사에서는 커스텀 환경을 더 많이 쓰겠지만, webpack, babel 등에 대해 완전한 이해가 없는 초보 개발자에게는 바로 개발을 시작할 수 있는 놀라운 환경을 제공해 주는 것이다. 직접 환경 설정을 하는 것도 중요하겠지만, 차근차근 해도 나쁘지 않을 것 같다. 나는..

[React] props와 state의 차이

리액트는 컴포넌트 단위로 나눠서 작업하기에 최적화되어 있다. 그래서 작은 컴포넌트 단위로 잘개 쪼개서 작업하고 또 합쳐서 큰 컴포넌트에 들어갈 수도 있다. 부모와 자식이 존재할 수 있다는 것이다. 이런 사전 지식을 알고 나서 props와 state를 인지하게 되면 둘의 차이를 보다 쉽게 알 수 있다. 참고: 본 블로그의 리액트 사용 예시는 모두 리액트 훅스(함수형)를 사용하고 있습니다. 틀린 내용이 있다면 댓글로 피드백 부탁드립니다 :) props란? 자식 컴포넌트에서 상속받아 쓰는 부모 컴포넌트의 상태 값 사용 예시 function Welcome(props) { // 자식 컴포넌트 return Hello, {props.name}; } function App() { // 부모 컴포넌트 return ( )..