개발세발

📍TypeScript : 타입이 있는 자바스크립트 - 타입을 명시하여 혹시 일어날 수 있는 문제점을 예방 function makePerson (name, age) {} makePerson("철수", "20") // 숫자가 문자 형태로 들어가서 연산이 제대로 되지 않음 function makePerson(name : string, age : number) {} makePerson("철수", "20") //error!! ◼️ 특징 ▪️ 변수 값에 데이터 타입 지정이 가능 - 예측 가능한 코드 작성 가능 - 디버깅 편리 ▪️ 객체지향 프로그래밍 가능 - ES6부터 사용가능한 클래스 기능을 제공 (TS가 ES6 다음에 나왔으므로) ▪️ 확장자가 .ts ➡️ 자바스크립트(.js)로 컴파일을 해줘야 함 $ npm ..

📍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..