[Day 54~56] 웹 풀사이클 데브코스 TIL

오늘 배운 내용 📚

React를 통해 간단한 사이트 제작하기

• 기본적인 JSX 문법
• 컴포넌트와 state
• React의 반복문과 조건문
• props 통한 동적바인딩

---

리액트를 이용하여 간단한 웹사이트를 만들어보는 시간을 가졌습니다.

강사님이 코드를 작성하기 전에 미리 기능을 구현을 해보는 과정에서 다양한 에러를 만나보았는데 그중 기억에 남는 에러는 onClick 이벤트였습니다.

// 기존 자바스크립트 사용방식
<button onclick="activateLasers()">
  Activate Lasers
</button>
// 리액트 사용방식
<button onClick={activateLasers}>
  Activate Lasers
</button>

이때 문제가 됐던 부분은, onClick 할 때 매개변수가 존재할 때였는데, 자바스크립트에서는 onclick="함수()" 이렇게 작성을 했다면 리액트에서는 onClick={함수()} 이렇게 작성을 하게 되면 에러가 발생을 하는데 이 부분에 차이가 있어서 혼자 왜 자꾸 에러가 날까 고민을 했습니다.

 

해당 코드를 자바스크립트로 작성했을 때 다음과 같았습니다.

<button onClick={onHandler()}></button>
button.onclick= onHandler();

<button onClick={()=>onHandler(a)}></button>
button.onclick = () => {onHandler(a)};

onClick={handler} 이 경우는 지금 바로 실행할 코드로, 이때 소괄호를 붙이게 되면 함수가 아니라 함수를 호출하고 남은 결과 값이 바인딩되는데 이때 핸들러 타입의 대부분은 void 타입으로 undefined가 되고,  또한 이렇게 사용했을 때 코드가 동작이 되더라도 무한루프가 발생할 수 있기 때문에 매개변수가 존재하는 경우에는 익명함수 안에 핸들러를 사용해야 하는 것입니다. 

 

이번 수요일부터 금요일까지 수업을 들으면서 느꼈던 것 중 하나가 강의를 들을 때 확실히 이론만 이어지는 것보다 실습을 통해 이론을 접하는 게 기억에 남는다는 생각을 한 것 같습니다. 특히 진행하면서 가장 힘들었던 핸들러 매개변수는 아마... 다시는 잊지 않을 것 같습니다. 사실 해당 부분의 자료가 부족하여 조금 더 찾아볼 예정인데 원하는 자료 찾는데 시간이 좀 걸릴 것 같다는 생각을 했습니다. 다음 주에는 새로운 개념들을 더 배우는 걸로 아는데 빨리 배우고 싶기도 하고 한편으로는 바로바로 이해할 수 있을지 걱정이 됩니다.