공부기록용

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co toDo를 입력하고 제출할 기본 UI구성 import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChangeInput = (event) => { setToDo(event.target.value); }; const onSubmitInput = (event) => { event.preventDefault(); console.log(toDo); } return..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 특정 코드의 실행을 제한하고 싶을때 useEffect를 사용하자. import { useState } from "react"; function App() { const [counter, setCounter] = useState(0); function onBtnClick() { return setCounter((prev)=>{ return prev +1 }) } console.log('i run all the time') return ( {counter} Click me! ); } expor..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co prop type : 어떤 타입(number, string,,,,)의 prop을 받고 있는지 체크해준다. 각기 다른 타입들을 검사하는것이 가능하다. function App() { return ( ); } > 별 다른 오류 없이도 text에 number을 넣어도 fontSize에 string를 넣어도 괜찮았다. 다만 이게 오류로 인식되고 발견되어서 수정이 되면 좋지만 모르고 넘어갈 수 있기때문에 아예 값의 형태를 prop의 type을 지정하려고 한다. 말고 라이브러리를 설치해도 된다. // ..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 버튼을 클릭할 때 어떤 동작을 수행하도록 하고 싶다. function App() { // state 생성 const[value, setValue] = React.useState("Save Changes") // 함수생성 const changeValue = () => { setValue("Revert Changes") } return ( ); } > UI 만들어주기 > UI의 컴포넌트에 프로퍼티인 onBtnClick는 이벤트리스너가 아니고 그냥 프로퍼티에 들어가는 단지 하나의 props일 뿐..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co > Save Changes, Confirm 컴포넌트에 각각 스타일을 지정해 주었지만 이는 동일한 스타일이다. 좀 더 효율적인 유지 보수를 위해서 동일부분을 컴포넌트화 시켜서 적용할 부분에 뿌려주고자 한다. props function Btn() { return ( Save Changes ); } > Btn함수에 스타일을 적용한 버튼을 만드는 하나의 컴포넌트를 만들고 function App() { return ( ); } > 보여지는 UI에 Btn 컴포넌트를 가져온다. function App(..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co function App() { const [index, setIndex] = React.useState(0); const onSelect=(event)=>{ console.log(event.target.value) } return ( Super Converter Minutes & Hours Km & Miles ); } Minutes & Hours Km & Miles 설정한 value 값을 잘 나타내고 있는걸 알 수 있다. 즉 사용자가 어떤 옵션을 선택했는지 알 수 있다. function A..