혼자 적어보는 노트

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()를 생..

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..

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 ..

React의 component에서 input을 다뤄보자. input을 사용 할 때는 input에 적은 값을 데이터로 받아서 적용하는 방식을 사용 하는데 React에서는 useState를 활용하여 input에 입력한 값을 저장해서 받아 쓴다. let [inputVal, setInputVal] = useState(''); 일단 저장할 state를 만들어주고 기본 설정은 빈 값으로 설정을 해준다. setInputVal(e.target.value) }/> 이벤트 함수는 보통 이벤트 객체 e 를 파라미터로 받아서 사용 할 수 있는데 onChange의 e.target.value를 통해 input에 텍스트가 적혀질 때마다 inputVal 값을 변경해주게 만든다. 이 부분을 조금 응용해 보자. 버튼 클릭 시 input..

React에서 component안에서 함수를 사용하려면 {}중괄호를 이용하여 사용하면 되는데 component의 return()안에서 if문 사용 시 if else를 적으면 적용이 안되고 삼항연산자를 사용해야 한다. { 1 == 1 ? "정답" : null } // [조건] ? [조건이 true일 때] : [조건이 false일 때] 위와 같이 조건에 따라 내용을 노출 시킬 수 있으며 여기서 null은 빈 html을 의미한다. { 1 == 1 ? : null } // { 1 == 1 ? 정답 : null } 텍스트 뿐만 아니라 이런식으로의 노출도 가능하다. &&연산자의 사용 { 1 == 1 && 정답 } 위 코드는 삼항연산자와 동일한 역할을 한다. 왼쪽 조건식이 true면 오른쪽의 JSX가 남는다. if문..

useState() class를 기반으로 한 class component를 이용하여 state를 관리 하는 방법도 있지만 복잡한 class component가 아닌 함수형 component에서도 state관리를 할 수 있게 만들어주는 useState()의 사용법을 정리해보려 한다. class함수 안에서 state를 사용하는 것과 마찬가지로 state는 react의 변수 대신 쓰는 데이터의 저장 공간이다. state는 변경되면 HTML이 새로고침 없이 리렌더링이 된다. import React, { useState } from 'react'; useState는 기본적으로 상단에 react와 함께 Import하여 사용할 수 있다. [name, setName] = useState('Jay'); 'Jay'라는 데..

Link component를 구성 할 때 a태그에서 href를 사용하면 홈페이지를 새로고침하여 페이지를 로드하게 된다. 하지만 아래의 react-router-dom의 Link를 사용하면 페이지 새로고침 없이 로드할 수 있다. import { Link } from "react-router-dom"; Home 해당 기록이 history스택에 저장된다. * Link태그는 ReactDOM에 의해 a태그로 변환된다 css를 꾸미고싶다면 a태그로 css를 꾸미면 된다. 해당 이미지 클릭 시 페이지 변경과 함께 데이터를 전달하고 싶다면? function Home({id, name, age, img}){ return( ) } 이런식으로 Link to 의 pathname property로 이동될 경로를 설정해주고 sta..

react-router-dom react-route-dom은 SPA앱을 만드는 것을 도와주는 package 페이지마다 다른 html파일이 아니라 다른 페이지처럼 보여주는 것이라고 볼 수 있다. npm에서 설치를 진행한다 npm i react-router-dom 기본 사용법 import { BrowserRouter, Route, Link, Switch } from "react-router-dom"; function App(){ return } - BrowserRouter : history API로 URL과 UI를 동기화 시키는 라우터 - HashRouter: 기본적으로 BrouswerRouter를 사용하지만 HashRouter는 주소 뒤에 #이 붙으며 #뒤에 적는 것은 서버로 전달이 되지 않아 안전한 라우..