만들면서 학습하는 리액트(react):사용편 - 028
사용편 최근 검색어 1 요구사항 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 (추천 검색어와 비슷) 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다 (추천 검색어와 같음) 구현 // store.js ... cla...
최근 포스트
만들면서 학습하는 리액트(react):사용편 - 027
사용편 추천 검색어 1 요구사항 번호, 추천 검색어 이름이 목록 형태로 탭 아래 위치한다 구현 // main.js ... class App extends React.Component { constructor() { ... this.state = {...
만들면서 학습하는 리액트(react):사용편 - 026
사용편 탭 보여주기 요구사항 추천 검색어, 최근 검색어 탭이 검색폼 아래 위치한다. 구현 // main.js import store from "./js/Store.js"; const TabType = { KEYWORD: "KEYWORD", HISTORY: ...
만들면서 학습하는 리액트(react):사용편 - 025
사용편 검색 결과가 없을 경우 요구사항 검색 결과가 검색폼 아래 위치한다. 검색 결과가 없을 경우와 있을 경우를 구분한다. 구현 // main.js class App extends React.Component { constructor() { super()...
만들면서 학습하는 리액트(react):사용편 - 024
사용편 폼 초기화 요구사항 x 버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제한다 구현 // main.js class App extends React.Component { ... handleReset() { this.setState(() =>...
만들면서 학습하는 리액트(react):사용편 - 023
사용편 폼 제출 요구사항 엔터를 입력하면 검색 결과가 보인다 구현 // main.js class App extends React.Component { ... handleSubmit(event) { event.preventDefault(); c...
만들면서 학습하는 리액트(react):사용편 - 022
사용편 조건부 렌더링 요구사항 검색어를 입력하면 x 버튼이 보이고 검색어를 삭제하면 x 버튼을 숨긴다 조건부 렌더링 방식 엘리먼트 변수를 사용하는 방식 ```javascript // main.js class App extends React.Component { ...
만들면서 학습하는 리액트(react):사용편 - 021
사용편 Input 요소 사용하기 요구사항 검색 상품명을 입력할 수 있는 폼이 위치한다 main.js const element = ( <> <header> <h2 className="container">검색<...
만들면서 학습하는 리액트(react):소개편 - 020
소개편 시작점 브랜치 전환 $ git checkout intro/jsx 실무에서는 CRA(create-react-app) 같은 툴로 개발환경을 구성함 index.html 수정 <html> <head> ... <title>...
만들면서 학습하는 리액트(react):소개편 - 019
소개편 템플릿 언어 const h1 = document.createElement("h1") // 1 const header = document.createElement("header") // 2 header.appendChild(h1) // 3 엘리먼트 h1을 생성 ...