JS/React Project (10) 썸네일형 리스트형 📝 메모앱 최적화하기 React Hooks 리액트에서 제공하는 여러 메서드들은 원래 클래스형 컴포넌트에서만 사용이 가능하다. 그러나 클래스형 컴포넌트는 중복 코드, 문법의 복잡성, 가독성의 문제 등 여러 단점이 있어 리액트 팀에서도 공식적으로 비추천하고 있으며, 메모앱에서 사용했듯 함수형 컴포넌트를 사용하는 것이 좋다. // 클래스형 컴포넌트 class MemoEditor extends Component { ... } // 함수형 컴포넌트 const MemoEditor = () => { ... } 하지만, 메모앱에서 사용했던 상태를 관리하는 State 또한 클래스형 컴포넌트에서만 사용할 수 있는 메서드이나, 'useState'를 사용하여 상태를 관리해왔다. 이는, 'use' 키워드를 사용하여 클래스형 컴포넌트에서 사용 가능.. 📝 간단한 메모앱 만들기 컴포넌트 MemoEditor: 메모를 입력 MemoBoard: 메모가 나타날 공간 MemoItem: 각각의 메모 1. 메모 작성하기 MemoEditor.js - State를 사용하여 입력된 값들을 저장 const [state, setState] = useState({ subject : "", title : "", content : "", }); - 내용 입력 시 setState할 함수 생성 const handleChangeState = (e) => { setState({ ...state, [e.target.name] : e.target.value }); } 각각의 입력폼에 onChange={handleChangeState} 를 입력하여 해당 요소가 변화할 때 호출 될 함수를 만들었다. event를 매개변.. 이전 1 2 다음
