그 땐 Front했지/그 땐 React했지 (38) 썸네일형 리스트형 [노마드/React로 영화 웹 서비스 만들기] Ch06 EFFECTS | 4. Cleanup 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. clean up 함수 function Hello() { useEffect(() => { console.log("hi!"); return () => console.log("bye!"); }, []); return ( Hello ) } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? : null} {showing ? "Hide" : "Show"} ); } 👉🏻전체.. [노마드/React로 영화 웹 서비스 만들기] Ch06 EFFECTS | 2. Deps 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. uesEffect의 두 번째 인자 특정 동작을 하면 특정 코드만 실행하도록 만들어보자! function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); useEffect(() => { console.log("i run only once".. [노마드/React로 영화 웹 서비스 만들기] Ch06 EFFECTS | 1. useEffect 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. useEffect 어떠한 변화가 있을 때마다 모든 코드를 rerender하는 것은 매우 비효율적이다. 때문에 특정 코드의 실행을 제한하는 법을 알아보자! import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("i run all the time"); useEffect(() => { console.log("cal.. [노마드/React로 영화 웹 서비스 만들기] Ch05 CREATE REACT APP | 0. Introduction & 1. Tour of CRA 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. create-react-app npx create-react-app@lastest my-app 👉🏻해당 명령어를 통해 react app을 생성한다. lastest 자리에는 가장 최신의 버전을 적는다. my-app 자리에는 본인이 생성할 app의 이름을 적는다. 👉🏻위와 같은 구조로 파일이 생긴다. src 디렉토리에서 필요한 App.js와 index.js를 남기고 모두 지우자. import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const.. [노마드/React로 영화 웹 서비스 만들기] Ch04 PROPS | 2. Props Types 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. props types 👉🏻전체 코드 참고ㅎㅎ 👉🏻text에는 string을, fontSize에는 숫자를 넣어야 하는데 두 번째 Btn처럼 잘못된 type의 값을 보낸는 상황이 있을 수 있다. 이러한 상황을 방지하기 위한 조치를 살펴보자. 👉🏻먼저 다음 script를 추가한다. Btn.propTypes = { text: PropTypes.string, fontSize: PropTypes.number, } 👉🏻Btn의 각 props의 PropTypes를 통해 type을 지정해준다. text props의 type은 string fontSize의 type은.. [노마드/React로 영화 웹 서비스 만들기] Ch04 PROPS | 1. Memo 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. props props로 함수를 보내보자 function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => setValue("Revert Changes"); return( ); } changValue라는 함수를 만들어준다. Btn에 changeValue라는 이름의 props로 함수를 넘겨준다. function Btn({text, changeValue}) { return ( {text} ); } 버튼의 onClick에 changeValue.. [노마드/React로 영화 웹 서비스 만들기] Ch04 PROPS | 0. Props 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. props 👉🏻먼저 Btn이라는 컴포넌트를 만들고 재사용성을 높여보자! function App() { return( ); } 👉🏻App 컴포넌트에서 Btn 컴포넌트를 2번 사용하는데 HTML tag에 속성을 지정하듯 props를 전달할 수 있다. text와 big이라는 props를 각각 버튼에 맞게 지정한다. 해당 props는 {text: "Save Changes", big: true} 와 같이 object 형태로 들어간다. function Btn({text, big}) { return ( {text} ); } props를 {text, big} 형태.. [노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 9. Final Practice and Recap 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. select로 본인이 원하는 단위 변환을 선택해보자! 이전 코드를 component로 만들기 function MinutesToHours() { const [amount, setAmount] = React.useState(0); const [inverted, setInverted] = React.useState(false); const onChange = (event) => { setAmount(event.target.value); } const reset = () => setAmount(0); const onFlip = () => { reset();.. 이전 1 2 3 4 5 다음
