- vue를 배우고 이를 활용하여 웹페이지를 만드는 프로젝트를 진행하였으나 프론트엔드 개발자가 되기 위해서는 vue만으로는 부족하고 반드시 React 공부도 필요하다고 생각해왔다. 학기 중에 인프런에서 기초 강좌인, "처음 만난 리액트"를 수강하였지만 코딩공부는 뭐니뭐니 해도 직접 결과물을 산출하며 익히는 것이 가장 좋은 방법이라고 생각해 영화 웹 만들기 강좌를 수강하게 되었다.
- 강의 페이지에 따로 스켈레톤 코드 등이 업로드 되어있는 것 같지 않아 다른 사람들에게 강의에 활용된 코드를 공유하고 내 공부 기록도 저장할 겸 블로그에 업로드 한다.
2. 학습 내용
- 처음엔 분/시간으로 변환하는 코드를 작성하였다.
- 그 다음에는 처음 배운 코드를 기반으로 select를 활용에 km/mile로 변환하는 또다른 옵션을 추가하였다.
- #3에서 학습한 내용 중 가장 중요한 것은 useState에 대한 이해이다.
// useState()활용할 때, 첫번째 원소는 현재상태이고 두번째 원소는 해당 변수명을 갖는 함수
// useState()활용할 때, 첫번째 원소는 현재상태이고 두번째 원소는 해당 변수명을 갖는 함수
// /////////////////정의 영역
const [amount, setAmount] = React.useState(0);
const [flipped,setFlipped]=React.useState(false);
constonChange=(event)=>{
setAmount(event.target.value);
};
constreset=()=>setAmount(0);
constonFlip=()=>{
reset()
setFlipped((current)=>!current)
};
// //////////////return 영역
return (
<div>
<div>
<labelhtmlFor="minutes">Minutes</label>
<input
value={flipped ? amount*60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped===true}/>
</div>
<div>
<labelhtmlFor="hours">Hours</label>
<input
value={flipped ? amount : Math.round(amount/60)}
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disabled={flipped===false}/>
</div>
<div>
<buttononClick={reset}>Reset</button>
<buttononClick={onFlip}>Flipped</button>
</div>
</div>
);
}
functionKmToMiles(){
return<h3>KM 2 M</h3>
}
functionApp(){
// const는 불변 let은 가변
// useState()활용할 때, 첫번째 원소는 현재상태이고 두번째 원소는 해당 변수명을 갖는 함수
// /////////////////정의 영역
const [index, setIndex]=React.useState("xx")
// useState는 array를 제공
// 첫 번째는 data
// 두 번째는 modifier 함수
// modifier 함수를 실행할 땐 모든 컴포넌트들이 다시 렌더링 됨
constonSelect=(event)=>{
console.log(event.target.value);
setIndex(event.target.value);
}
// //////////////return 영역
return (
<div>
<h1>Super Converter</h1>
<selectvalue={index}onChange={onSelect}>
<optionvalue="xx">Select your units</option>
<optionvalue="0">Minutes&Hours</option>
<optionvalue="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를 배우니 확실히 조금 더 수월한 것 같고 공부한다는 느낌보다는 흥미롭게 하나를 알아가는 기분이다.
- 이전에 스터디를 할 땐, 이론 부분에 집중해 공부하였는데 그 방식보다는 직접 코드를 쳐보며 실행해보는 방식이 확실이 재미를 붙여가며 공부하는 방법인 것 같다. 하나하나 이해하고 직접 작성하면서 공부하다보니 생각보다 속도는 안 나지만 그래도 제대로 익히고 가는 것이 장기적으로는 더 빠른 길일 거라고 믿는다.
