본문 바로가기

분류 전체보기

 (454)
13. Custom Hooks 사용자 훅 만들기 useEffect(), useState() 와 같은 Hook을 사용자가 만들어서 사용하기 비슷한 작업들을 하나의 custom 훅을 만들어서 사용하기. 1. hooks 폴더 하나 만들기 2. 사용자 훅 이름 정해서 만들기 ex(useFetch.js) 3. 바뀌는 부분은 api url 주소 밖에 없으므로 컴포넌트 매개변수로 url값을 받는다. import { useEffect, useState } from "react"; export default function useFetch(url){ const [data,setdata]=useState([]); useEffect(()=>{ fetch(url) .then(res=>{ return res.json(); }) .then(data=>{ setWords(dat..
12. useEffect(), fetch()로 API 호출 1. dummy를 지우고 days라는 state를 만든다 (useState()이용) 2. const [days, setDays]=useState([]) : 빈 배열로 처음값 state를 만든다 3. useEffect() Hook 이용 : 어떤 상태값이 바뀌었을 때 동작하는 함수를 작성할 수 있다. (첫번째 매개변수로 함수, 함수가 호출되는 타이밍은 랜더링 결과가 실제 돔에 반영된 직후, 컴포넌트가 사라지기 직전에도) 4. 클릭이벤트를 만들어서 클릭할 때마다 state를 변경시켜줄 것이다. 버튼 누를 때마다 숫자 변하도록 이렇게 하면 원하지 않는 상황에서 useEffect() 함수가 동작할 수 있다. 그래서 useEffect(()=>{},두번째매개변수); 두 번째 매개변수에 의존성 배열을 넣어준다 (의존성..
11. REST API (Create, Read, Update, Delete) REST API : URI 주소와 메서드로 CRUD 요청을 한다. CRUD : 메서드 Create : POST Read : GET Update : PUT Delete : DELETE
11. json-server(접근 권한 오류 해결) json-server를 이용하여 DB 구축. 1. npm install -g json-server : 처음에 오류 발생해서 아래 권한 변경 후 다시 실행. 2. json-server --watch ./src/db/data.json --port 3001 오류 해결 참고 (https://mizzo-dev.tistory.com/entry/Mac-OSNode-npm-Error-EACCES-permission-denied-access-usrlocallibnodemodules-%EA%B6%8C%ED%95%9C-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 )
10. event handling 뜻 보기, 숨기기체크박스 만들기 import { useState } from "react"; export default function Word({word}){ const [isShow,setIsShow]=useState(false); const [isDone,setIsDone]=useState(word.isDone); function toggleShow(){ setIsShow(!isShow); } function toggleDone(){ setIsDone(!isDone); } return( {word.eng} {isShow && word.kor} 뜻 {isShow?'숨기기':'보기'} 삭제 ); } import dummy from '../db/data.json'; import { useParams } from 'react-router..
9. react-router-dom 를 이용하여 페이지 이동 1. npm install react-router-dom 설치 2. App.js에 import {BrowserRouter, Route, Switch} from "react-router-dom"; -1. App 전체를 BrowserRouter 태그로 감싼다. -2. Header는 모든 페이지에 나와야하기 때문에 헤더 다음부분에 Switch 태그 사용 : Switch 내부는 url에 따라 다른 페이지를 보여줄 것이고 Switch 외부는 전체 페이지에 공통적으로 보여질 것이다. -3. Switch 태그 안에 Route 태그를 이용하여 path를 지정해준다. (exact을 이용하면 정확한 경로에 해당할 경우에만 컴포넌트를 보여준다) 3. a 태그 대신에 Link to 태그를 이용하여 링크를 설정해준다. (imp..
8. 더미 데이터 구현, map() 반복문 페이지 만들기 1. index.css 만들기 body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 20px; } ol, ul { margin: 0; padding: 0; list-style: none; } code { font-family: source-code-pro, Menlo, Monaco,..
7. props props : properties의 약자로 속성값 의미 속성값 age를 Hello component에 넣어준다. 그러면 Hello 컴포넌트에서는 매개변수로 값을 받아온다. function Hello(props){}에서 props라는 매개변수에 값을 받는다. change 누르면 props 받은 후 숫자 1씩 증가하도록 // const Hello=()=>{ // Hello; // }; // export default Hello; import {useState} from "react"; export default function Hello(props){ console.log(props); // let name='Mike'; const [name,setName]=useState('Mike'); const [ag..

티스토리툴바