STUDY

UseEffect Effect Hook인 UseEffect는 함수 컴포넌트 내에서 side effects를 수행할 수 있게 해줌 class 의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것 Hook: 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수 side effects(짧게 effects): 컴포넌트 안에서 데이터를 가져오거나 구독하고 DOM을 직접 조작하는 작업 componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 마친 이후 실행 componentDidUpdate: 리렌더링을 ..

const [form, setForm] = useState({ date: Date.now(), obj: {option: "", size: ""}, }); const inputHandler = e => { setForm({ ...from, //이전 상태 복사 obj: { ...form.obj, option: e.target.value } }) }

input에 값 입력 시 일정 간격을 두고 따라오는 단위를 만들어야 했음 const [number, setNumber] = useState(0); const inputHandler = e => { setNumber(e.target.value); }; return ( ... inputHandler(e)} /> {number ? "kg" : ""} // number state 값과 똑같이 그대로 작성됨 ... ) //scss .input-wrap { position: relative; .input { height: 48px; } .unit { position: absolute; top: 16px; left: 18px; font-size: 14px; } [data-before]::before { content..