useState useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 한다. const [state, setState] = useState(initialState); 함수형 업데이트 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); 위 코드와 같이 setState의 ( )안에 수정할 값이 아니라 함수를 넣는 것이다. 그리고 그 함수의 인자에서 현재 state를 가져올 수 있고, { }안에서는 이 값을 변경하는 코드를 작성할 수 있습니다. // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return curren..

useEffect를 사용하는 이유 useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무엇가를 실행하고 싶다거나 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무엇가를 실행하고 싶을 때 useEffect를 사용한다. useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로, import React { useEffect } from 'react'로 import 해서 사용한다. useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행된다. 전체의 흐름은 아래와 같다. inpust 값을 입력 value 즉 state가 변경 state가 바뀌었기 때문에 → app 컴포넌트가 리렌더링 리..

ajax 서버 서버에 데이터를 요청 서버 : 부탁하면 진짜로 들어주는 프로그램 ajax란 서버에 get, post 요청할 때 새로고침 없이 데이터를 주고 받을 수 있게 도와주는 간단한 브라우저 기능이다. ajax 사용해도 GET 요청 가능 ajax 이용한 GET요청은 axios.get(’url’) { axios.get('') }}>버튼 ajax 요쳥결과는 ajax.get(’url’).then() 서버가 보낸 실제 핵심 데이터 보려면 console.log(결과.data) { axios.get('') .then((결과) => { console.log(결과.data) }) 실제 결과 catch ajax 요청이 실패할 경우 catch로 이용해서 실패하면 띄울 코드 { axios.get('') .then((결과)..

Lifecycle/ hook 컴포넌트의 Lifecycle 페이지에 장착되기도 한다.(mount) 조작하면 업데이트(update) 필요 없으면 제거(unmount) useEffect 이 라이프 주기를 안다면 중간 간섭이 가능함. 간섭 - 코드실행 간섭할 때 코드를 중간중간에 갈고리 달아서 함 컴포넌트 갈고리 다는법 이거는 클래스형 - 안씀 class Detail extends React.Component { componentDidMount(){ //컴포넌트 mount시 여기 코드 실행 } componentDidUpdate(){ //컴포넌트 update시 여기 코드 실행 } componentWillUnmount(){ //컴포넌트 unmount시 여기 코드 실행 } } 함수형 이거를 주로 씀 function ..

styled-components js파일 안에 다 집어넣고 싶다. import styled from ‘styled-componets’ 장점 1. CSS파일을 안열어도 된다. let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; ` 장점 2. 스타일이 다른 js파일로 오염되지 않음 → 그 페이지에 사용된 것은 그 페이지에서만 사용이 가능 오염 방지하려면 컴포넌트.module.css 라고 지으면 된다. → 컴포넌트의 스타일에 종속되게 할 수 있다. ex) App.module.css 면 App에 종속됨 장점 3. 페이지 로딩 시간 단축 장점4. 기존의 스타일 복사 가능 let YellowBtn = styled.but..

URL 파라미터로 상세페이지 100개 페이지를 여러개 만들고 싶을 땐 :URL 파라미터 써도 된다. /detail/아무거나 유저가 URL 파라미터에 입력한 거 가져오려면 useParams function Detail(props) { let {id} = useParams(); url 파라미터 만들 때 여러개 가능