🎁ReactJS

async-await & React Router || React Hook useEffect has a missing dependency 경고 해결

📌 async - await fetch로 api에 접속하는 방식 중에 then을 이용하여 response를 받아오곤 했는데, async-await를 이용하는 것이 더 보편적이라고 한다. then useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ) .then((response) => response.json()) .then((json) => { setMovies(json.data.movies); setLoading(false); }); }, []); async - await const getMovies = async () => { const json = await ( await fet..

React 실행, style 지정, State 실행 설정(useEffect, Cleanup Func)

📌ReactApp 실행 Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgnode -vnpx제대로 설치되었는지 확인npx create-react-app [폴더명]code [폴더명]새로 프로젝트 생성 및 실행npm startnpm 오류 발생→ terminal을 cmd로 바꿔준 후, 윈도우 환경 변수 설정 후 재부팅해주어 해결npm i prop-typesprop-types 설치 📌Style 지정module.css 형태의 파일을 생성하여 원하는 style로 css를 만들어준 후에 import해준다. (Ex. App.module.css)import Button from "./Button";import..

Props & Prop Type란 무엇인가

📌 PropsProps는 함수에 전달되는 인자를 의미한다. function SaveBtn() { return ( SAVE ); } function ConfirmBtn() { return ( CONFIRM ); }버튼이 여러 개일 경우, 중복되는 속성이 생기고 코드 중복으로 인해 불편함이 커진다. props를 이용하여 하나의 버튼만을 생성한 후, text만 바꾸어 사용하는 방식이 더 편리하다.function Btn(props) { console.log(props); return ( {props.btn} ); } function App() { return ( ); }props로 object 형태로 다양한 값을 받아올 수 있고, props.btn과 같은 형태로 활용이 가능하다. object 형태로 받아오는 것..

JSX & State란 무엇인가 + Form & Input

📌JSX란Javascript를 확장한 문법이다. HTML과 유사한 형태로 React 개발자 입장에서 편리하게 사용한다.const h3 = React.createElement( "h3", { onMouseEnter: () => console.log("mouse enter"), }, "Hello I'm a h3" );위와 같은 형태의 컴포넌트는 아래와 같이 JSX를 통해 HTML과 유사한 형태로 사용한다.const Title = ( console.log("mouse enter")}> Hello I'm a h3 );const Button = ( console.log("clicked")} > Click );style을 지정해서 사용도 가능하다. 반드시 {}가 두 번 감싸지는 형태여야 적용된다. 이렇게 JSX로 ..