혼자 적어보는 노트

React의 완전 기본을 마치고 tab메뉴를 구현해보기로 했다. 더 나은 방법이 있을까 궁금하지만 일단 구현되는 대로 작업을 했다. 탭메뉴(Tab Menu) 구현 function Example(){ const [tabState, setTabState ] = useState('product'); return( { setTabState('product')}}>상품정보 { setTabState('review')}}>제품리뷰 { setTabState('shipping')}}>배송정보 { { product: 상품정보, review: 제품리뷰, shipping: 배송정보, }[tabState] } ) } 먼저 tabState를 만들고 default로 상품정보가 보여지게끔 상태를 담아주었고 tab의 각 버튼 클릭 시..

React에서 hook이 생기고 난 후 connect방식보다 조금 더 편한 방식인 useSelector와 useDispatch 2가지 hook을 알아보자 useSelector() useSelector 기능을 사용하여 redux store의 state 데이터를 추출해서 가지고 올 수 있다. let state = useSelector((state) => state) 여기서 state는 redux에 있던 모든 state를 의미하며 위 코드는 state를 리턴한다는 뜻. console.log(state)를 확인해보면 만들어놓은 모든 reducer들이 담겨있다. connect처럼 props를 담아서 사용할 필요없이 state.[reducer name]으로 데이터를 불러올 수 있음. 예) state.reducern..

useContext 하위컴포넌트들이 props 없이도 부모의 state 값을 사용할 수 있게 만들어주는 React Hook 하위 컴포넌트에 state값을 넘겨주려면 props를 사용하여 넘겨주는데 하위컴포넌트가 많을 경우 props를 계속적으로 선언해줘야 한다, props를 사용하지 않고 useContext hook을 이용하여 state값을 넘겨주는 방법도 있다. useContext 사용법 import React, { useState, useContext } from "react"; let dataContext = React.createContext(); let data = [ { name: "Jay", age: 20 } ] 1. 부모컴포넌트인 App() 위에 React.createContext()를 생..

fetch() 원격 api를 간편하게 호출할 수 있는 내장함수. 라이브러리를 사용해도 되지만 간단한 호출에는 라이브러리의 도움 없이 내장된 fetch() 함수를 사용하여 처리할 수 있다. fetch사용법. fetch는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고 promise타입의 객체를 반환한다. API호출이 성공 했을 경우에는 response객체를 반환하며 실패했을 경우에는 error 객체를 반환한다. GET 요청 fetch()은 defualt로 get요청이므로 get요청을 할 경우 옵션인자가 필요가 없다. Response {status: 200, ok: true, redirected: false, type: "cors", url: …} API들은 위와 같이 대부분 JSON형태로 제공되며 ..

UseEffect class 컴포넌트에 사용하는 Lifecycle hook처럼 class 컴포넌트를 사용하지 않아도 componentDidMount(), componentWillUnmount(), componentDidUpdate() 와 같은 기능을 사용할 수 있게 만들어주는 hook이다. Effect Hook을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다. 기본 사용법 useEffect(() => { }); useEffect 안에 코드를 적으면 컴포넌트가 mount되었을 때와 이 후 update될 때 마다 실행된다. import React, { useState, useEffect } from "react"; function Example(){ const [welcome, setW..

주어진 x와 y값중 x값에 따라 오름차순 정렬을 하고 x의 값이 같을 경우 y값에 맞추어 정렬을 하는 방법. let arr = [ [5, 3], [3, 2], [1, 2], [1, 3], [4, 4], [3, 1] ]; arr.sort((a, b)=> { if(a[0] === b[0]) return a[1] - b[1]; else a[0] - b[0]; }) console.log(arr); // [1, 2], [1, 3], [3, 1], [3, 2], [4, 4], [5, 3]

배열의 길이가 주어진 상태에서 값을 초기화 하는 방법. 여러 방법이 있지만 그 중 간단한 2가지 방법 for문 사용 const n= 5; let arr = []; for(let i=0; i 0); console.log(arr); //[0, 0, 0, 0, 0] - 정해진 길이의 array를 해당 값으로 만들어 주는 방법.

useParams react-router-dom의 hook인 useParams를 사용하면 컴포넌트에 전달받은 URL Parameter를 받아올 수 있다. import { useParams } from 'react-router'; 상단에 import 한 후 let { id } = useParams(); component 내부에서 위와 같이 선언해주면 /:id값에 넣은 내용을 받아올 수 있다. array 안에서 params로 받은 id값과 일치하는 자료를 찾아 그 자료안에서의 데이터를 활용하고 싶다면 어떻게 해야할까? url의 params에 맞는 데이터 사용하기 let user = [ { id : 0, name : "Jay", age : 28, job : "Student", }, { id : 1, name ..