본문 바로가기

JavaScript/React45

React) 컴포넌트 스타일링④ - styled-components 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 스타일링 styled-components - 자바스크립트 파일 안에 스타일을 선언하는 방식 (CSS-in-JS) 사용을 위해 설치해보겠습니다. $ yarn add styled-components StyledComponent.js import styled, { css } from 'styled-components' const Box = styled.div` /* props로 넣어준 값을 직접 전달 가능 */ background: ${props => props.color || 'blue'}; padding: 1rem; display: flex; `; const Button = s.. 2022. 11. 19.
React) 컴포넌트 스타일링③ - CSS Module (classnames) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 스타일링 CSS Module - CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 → 자동으로 [파일 이름]_[클래스 이름]_[해시값] 형태로 만들어줌 - 컴포넌트 스타일 클래스 이름 중첩되는 현상 방지 - v1의 create-react-app에선 웹 팩에서 css-loader 설정을 별도 해줘야 하지만, v2 버전 이상부턴 설정할 필요 없이 .module.css 확장자로 파일 저장만 한다면 CSS Module 적용 CSSModule.module.css /* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */ .wrapper { bac.. 2022. 11. 19.
React) 컴포넌트 스타일링② - Sass 사용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 스타일링 Sass 사용하기 - CSS 정처리기로 복잡한 작업을 쉽게 할 수 있도록 도와줌 - 스타일 코드의 재활용성을 높여줌 - 가독성을 높여 유지 보수가 쉬움 확장자 종류 .sass .scss ① .sass 문법 $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $parimary-color 중괄호와 세미콜론을 사용하지 않는 것을 확인할 수 있습니다. ② .scss 문법 $font-stack: Helvetica, sans-serif; $primary-color: #.. 2022. 11. 18.
React) 컴포넌트 스타일링① - 일반 CSS 방식 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 스타일링 일반 CSS (가장 흔한 방식) - CSS 클래스를 중복되지 않게 만드는 것이 중요 중복되지 않게 하기 위해 클래스 명을 특별한 규칙을 사용하여 짓거나, CSS Selector를 이용합니다. 새로운 프로젝트를 생성하여 App.js와 App.css를 살펴보겠습니다. App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; App.css .App { .. 2022. 11. 18.
React) Hooks - useCallback, useRef, 커스텀 Hooks 만들기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. Hooks - useCallback, useRef, 커스텀 Hooks 만들기 useCallback - 렌더링 성능을 최적화할 때 사용 - 함수 재사용 Average.js import { useState, useMemo } from "react"; const getAverage = numbers => { console.log('평균값 계산 중...'); if(numbers.length === 0) return 0; const sum = numbers.reduce((agg, num) => agg + num); return sum / numbers.length; } const Average.. 2022. 11. 15.
React) Hooks - useReducer, useMemo 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. Hooks - useReducer, useMemo useReducer - useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 하고 싶을 때 사용 - 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션 값을 전달 받아 새로운 상태를 반환 ※ 참고하면 좋은 영상 https://www.youtube.com/watch?v=E7bNzWrlKTE 카운터 구현하기 Counter.js import { useReducer } from 'react'; function reducer(state, action) { // action.type에 따라 다른 작업 수행 sw.. 2022. 11. 15.

티스토리툴바