개발 알다가도 모르겠네요

App의 state에 선택한 언어 추가 App 컴포넌트의 Suggestion 컴포넌트 생성하는 쪽에 선언해둔 onSelect 코드에 selectedLanguages를 자신의 state에 추가해보자. //App.js import { fetchLanguages } from "./api.js"; import SearchInput from "./SearchInput.js"; import Suggestion from "./Suggestion.js"; export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { this.state..

화살표 방향키 입력으로 seleectedIndex 변경 키보드 이벤트를 통해, selectedIndex 값을 바꿀 수 있도록 해보자. //Suggestion.js export default function Suggestion({ $target, initialState }) { this.$element = document.createElement("div"); this.$element.className = "Suggestion"; $target.appendChild(this.$element); this.state = { selectedIndex: 0, items: initialState.items, }; this.setState = (nextState) => { this.state = { ...this.s..

컴포넌트 구조 App 컴포넌트가 세 컴포넌트를 제어하는 형태이다. SelectedLanguages, SearchInput, Suggestion 각각의 컴포넌트는 서로 의존성을 띄지 않는 형태로 작성해야 재사용이 가능하다. App 컴포넌트 작성 // App.js export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { //TODO: 구현해야함 }; } 그 후, App 컴포넌트를 생성하는 index.js를 선언, index.html에서 불러오게 한다. // index.js import App from "./App.js"..