Front-end/React 실습4 자습서 - 게임 자습서를 따를 수 있는 시작점. 리액트의 기본 리액트 가장 일반적인 테크닉 시간여행 -통찰력 React란 무엇인가요? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 코드를 살펴보면 세 가지 React 컴포넌트를 확인할 수 있습니다. Square - 버튼 랜더링 Board - 사각형 9개 랜더링 Game - 게임판 랜더링 Square 컴포넌트는 을 렌더링하고 Board는 사각형 9개를 렌더링합니다. Game 컴포넌트는 게임판을 렌더링하며 나중에 수정할 자리 표시자 값을 가지고 있습니다. 지금은 사용자와 상호작용하는 컴포넌트가 없습니다. 프롭스. 외.. 2022. 5. 9. 리액트 사용편 import { formatRelativeDate } from './js/helpers.js'; import store from './js/store.js'; const TabType = { KEYWORD: 'KEYWORD', HISTORY: 'HISTORY', }; const TabLabel = { [TabType.KEYWORD]: '추천 검색어', [TabType.HISTORY]: '최근 검색어', }; class App extends React.Component { constructor() { super(); this.state = { searchKeyword: '', searchResult: [], submitted: false, selectedTab: TabType.KEYWORD, keyword.. 2022. 4. 5. 랜더함수 리팩토링(인프런 김정환) 리팩토링 전 import store from './js/store.js'; class App extends React.Component { constructor() { super(); this.state = { searchKeyword: '', searchResult: [], submitted: false, }; } handleSubmit(event) { event.preventDefault(); console.log('TODO:handleSubmit', this.state.searchKeyword); this.search(this.state.searchKeyword); } search(searchKeyword) { const searchResult = store.search(searchKeyword);.. 2022. 4. 2. Habit Tracker 만들기 리액트로 구현할 것은 위의 모델. 2022. 3. 20. 이전 1 다음
