inch를 cm로 변환하는 기능 구현하기 inch 계산

컴포넌트에 CSS 적용하기 1. style (Inline) 속성 function Nav() { return ( HTML CSS JavaScript ) } 2. module 적용 // App.module.css // // module 단어 필수 .border { border: 1px solid red; } import styles from './App.module.css'; ... function Nav() { return ( // classname = {변수.태그이름 } HTML CSS JavaScript ) } ...

가위바위보 게임 구현 // App.js // import React, { useState } from 'react'; import './App.css'; import Title from './Title'; import RSPComponent from './RSPComponent'; import Result from './Result'; function App() { const RSP = ['바위', '가위', '보']; const [comChoice, setComChoice] = useState(''); const [playerChoice, setPlayerChoice] = useState(''); const [result, setResult] = useState(''); const handleChoic..

외부 서버로부터 데이터 받아오는 코드 data = axios.get(' '); data.then(response => { }) 1) const onClick = () => { const data = axios.get('https://jsonplaceholder.typicode.com/todos/1/'); data.then(response => { setData(response.data) }) } ↕ 같은내용 const onClick = async() => { const data = axios.get('https://jsonplaceholder.typicode.com/todos/1/'); setData(response.data) } await 코드가 사용될때에는 코드를 감싸는 함수에 async 키워드를 사..

useEffect - 컴포넌트에서 부작용(side effect)을 처리하기 위해 사용 - 컴포넌트 외부와의 상호작용, 데이터 로딩, 구독 등의 작업 - 첫번째 인자는 동작할 함수, 두번째 인자는 "dependency" 배열 - 컴포넌트가 렌더링 될 때마다 호출되는데 두번째 요소인 "dependency" 배열(deps)의 값이 변경되었을 때만 동작 - "dependency" 배열(deps)이 비어 있으면 처음 렌더링 될 때 한번만 동작 - 첫번째 인자인 함수에서 함수를 반환하면 컴포넌트가 제거되면서 정리하는 작업을 담당 (clean-up) useEffect(() => { // 부작용을 처리하는 코드 return () => { // 선택사항 // 클린업 작업을 처리하는 코드 } }, [state1, stat..

React Router ▶ 사용자의 요청을 각 담당 컴포넌트로 연결하는 기능 → 각 주소에 대한 화면을 보여주는 것 ex) /example/a à Hello /board/1 à 1번 게시물 내용 /user à 회원 목록 ▶ 자주 사용되는 컴포넌트 1. : 애플리케이션 전체를 감싸며 라우팅을 관리 2. : 여러개의 를 표현하기 위한 컴포넌트. 모습이 변화되는 영역 3. : 특정 경로에 해당하는 컴포넌트, 주소에 따라 보여지는 컴포넌트. 4. 태그와 컴포넌트 => 태그에서는 href 를 통하여 이동하고 는 to 를 이용하여 이동을 한다. (속도측면에서 Link 가 낫다.) , 페이지 이동 & 전체 새로고침(데이터 새로 받아옴) 페이지 이동 & 일부만 새로고침 (필요한 부분만 재 렌더링, 데이터 받지 않음) ..