-
[React] 노마드코더 ReactJs로 영화 웹 만들기 : #3 STATEreact 2024. 6. 8. 10:30
1. 들어가기에 앞서
- vue를 배우고 이를 활용하여 웹페이지를 만드는 프로젝트를 진행하였으나 프론트엔드 개발자가 되기 위해서는 vue만으로는 부족하고 반드시 React 공부도 필요하다고 생각해왔다. 학기 중에 인프런에서 기초 강좌인, "처음 만난 리액트"를 수강하였지만 코딩공부는 뭐니뭐니 해도 직접 결과물을 산출하며 익히는 것이 가장 좋은 방법이라고 생각해 영화 웹 만들기 강좌를 수강하게 되었다.
- 강의 페이지에 따로 스켈레톤 코드 등이 업로드 되어있는 것 같지 않아 다른 사람들에게 강의에 활용된 코드를 공유하고 내 공부 기록도 저장할 겸 블로그에 업로드 한다.
2. 학습 내용
- 처음엔 분/시간으로 변환하는 코드를 작성하였다.
- 그 다음에는 처음 배운 코드를 기반으로 select를 활용에 km/mile로 변환하는 또다른 옵션을 추가하였다.
- #3에서 학습한 내용 중 가장 중요한 것은 useState에 대한 이해이다.
// useState()활용할 때, 첫번째 원소는 현재상태이고 두번째 원소는 해당 변수명을 갖는 함수// useState는 array를 제공// 첫 번째는 data// 두 번째는 modifier 함수// modifier 함수를 실행할 땐 모든 컴포넌트들이 다시 렌더링 됨- 코드
<!DOCTYPE html><html>
<body><!-- html 보여지는 요소 --><div id="root"><!-- <h3></h3> --><!-- <button>click me</button> --></div></body>
<script type="text/babel">const root=document.getElementById("root");
function MinutesToHours(){// const는 불변 let은 가변// useState()활용할 때, 첫번째 원소는 현재상태이고 두번째 원소는 해당 변수명을 갖는 함수// /////////////////정의 영역const [amount, setAmount] = React.useState(0);const [flipped,setFlipped]=React.useState(false);
const onChange=(event)=>{setAmount(event.target.value);};const reset=()=>setAmount(0);const onFlip=()=>{reset()setFlipped((current)=>!current)};
// //////////////return 영역return (<div><div><label htmlFor="minutes">Minutes</label><inputvalue={flipped ? amount*60 : amount}id="minutes"placeholder="Minutes"type="number"onChange={onChange}disabled={flipped===true}/></div><div><label htmlFor="hours">Hours</label><inputvalue={flipped ? amount : Math.round(amount/60)}id="hours"placeholder="Hours"type="number"onChange={onChange}disabled={flipped===false}/></div>
<div><button onClick={reset}>Reset</button><button onClick={onFlip}>Flipped</button></div></div>);}function KmToMiles(){return <h3>KM 2 M</h3>}
function App(){// const는 불변 let은 가변// useState()활용할 때, 첫번째 원소는 현재상태이고 두번째 원소는 해당 변수명을 갖는 함수// /////////////////정의 영역const [index, setIndex]=React.useState("xx")// useState는 array를 제공// 첫 번째는 data// 두 번째는 modifier 함수// modifier 함수를 실행할 땐 모든 컴포넌트들이 다시 렌더링 됨
const onSelect=(event)=>{console.log(event.target.value);setIndex(event.target.value);}// //////////////return 영역return (<div><h1>Super Converter</h1><select value={index} onChange={onSelect}><option value="xx">Select your units</option><option value="0">Minutes&Hours</option><option value="1">Kim&Miles</option></select><hr/>{index ==="xx"? "Please select your units" : null}{index === "0" ? <MinutesToHours/> : null}{index === "1" ? <KmToMiles/> : null}</div>);}// root라는 id를 가진 div 요소에 React 컴포넌트를 렌더링ReactDOM.render(<App/>, root);
</script></html>- 실행 결과
3. 리뷰
- vue를 배운 뒤 react를 배우니 확실히 조금 더 수월한 것 같고 공부한다는 느낌보다는 흥미롭게 하나를 알아가는 기분이다.
- 이전에 스터디를 할 땐, 이론 부분에 집중해 공부하였는데 그 방식보다는 직접 코드를 쳐보며 실행해보는 방식이 확실이 재미를 붙여가며 공부하는 방법인 것 같다. 하나하나 이해하고 직접 작성하면서 공부하다보니 생각보다 속도는 안 나지만 그래도 제대로 익히고 가는 것이 장기적으로는 더 빠른 길일 거라고 믿는다.
- 지금은 react 기본 문법을 공부하는 단계지만 빨리 익혀서 능숙하게 다루고 싶다.
- chatGpt는 코딩 공부 최고의 친구이자 선생님이다..ㅎㅎ
'react' 카테고리의 다른 글
[React] js파일에서 html 태그 자동완성하기 (0) 2024.06.12 [React] 노마드코더 ReactJs로 영화 웹 만들기 : #5 useEffect-Cleanup (0) 2024.06.10 [React] 노마드코더 ReactJs로 영화 웹 만들기 : #5 useEffect (0) 2024.06.10 [React] 노마드코더 ReactJs로 영화 웹 만들기 : #4 PROPS (0) 2024.06.09 [React] Props component (0) 2024.05.08