개발세발

📍ueReducer() : 컴포넌트의 상태를 관리할 때 사용하는 Hooks const [state, dispatch] = useReducer(reducer, initialState); 값 설명 state 컴포넌트에서 사용할 상태 값 dispatch 액션을 발생시키는 함수 reducer reducer 함수 : 개발자가 직접 정의해야 하는 함수 initialState 초기 상태 값 dispatch( { type : value} ) // 액션이 생긴 모양이 객체 function reducer(state(현재 변수의 상태값), action(dispatch의 객체 = 업데이트를 할 정보)) { // 새로운 상태를 만드는 로직 return 새로운 상태; } - 특징 : 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분..

Hooks : 리액트 버전 16.8에 새로 도입된 기능 - 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능 제공 ◼️ 종류 useState useEffect useRef useReducer useMemo useCallback 📍useState() const [state, setState] = useState(초기값); //예시 const [number, setNumber] = useState(3); // number =3 setNumber(6) // number = 6 - 가장 기본적인 Hook - 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 줌 (*) 실습 1 - 숫자 증감 시키기 Counter.jsx import { useState } from 'react'; const Counter = ..

📍 Post CSS - CSS module 기법 중 하나 : CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 형태로 자동으로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술 파일이름_클래스이름_해시값 사용방법 - 버전 2이상부터는 별도의 설정이 필요없고, 다음과 같은 확장자로 파일을 저장하기만 하면 적용 파일이름.module.css CSS Module.jsx import React from "react"; import styles from "../CSSModule.module.css"; const CSSModule = () => { console.log(styles); console.log(styles.container); return ( CSS Module실습 ); CSSMo..

스타일링 방식 설명 일반 css 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass - 자주 사용되는 css전처리기 (pre-processor) 중 하나 - 확장된 css문법을 사용하여 css코드를 더욱 쉽게 작성할 수 있음 CSS Module - css 클래스가 다른 css클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-compontnts - 스타일을 자바스크립트 파일에 내장시키는 방식 - 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트 생성 가능 큰 프로젝트는 Sass를 많이 사용 이름 생성 규칙 컴포넌트_이름-클래스_이름 ex) .App-logo{ height : 40vmin; pointer-events : none; } .App-link {..