안녕하세요! 한국외국어대학교 글로벌캠퍼스 멋쟁이사자처럼 11기를 대상으로 React.js 기초 세션을 진행한 임예람입니다.
세션 자료와 세션 영상은 아래에 첨부했습니다!
- React 프로젝트 생성하기
- React의 기본 hook인
useState,useEffect - 반복되는 요소
component로 만들기
- likelion이라는 이름으로 프로젝트를 생성했습니다. 기본으로 생성되는 파일과 폴더에 대해 짧게 알아보았습니다.
- 간단한 리스트뷰를 만들어 세션을 진행했습니다.
useState를 이용해 아이템의 개수를 변경시키는 기능을 만들었습니다.
useEffect를 이용해 개수가 변경된 아이템을 감지하는 기능을 만들었습니다.
-
반복되는 요소를
component만들어 재사용성의 중요성을 강조했습니다. -
체크박스를 활용해 체크된 아이템이 몇 개인지 세는 기능을 과제로 내주었습니다.
멋사 내에서 프로젝트와 해커톤들을 진행하며 11기분들이 React.js 사용에 어려워한다는 것을 알게 되었습니다. 겉만 React일 뿐, useState나 component를 사용하지 않고 대부분 HTML, CSS에만 의존하는 코드를 작성하고 있었습니다.
이러한 현상을 인식하고 나서는 쭉 React.js 기초에 대해 강의하고 싶었습니다. state를 사용하면 무의미한 랜더링을 막을 수 있는 점, 똑같이 생긴 요소는 재사용이 가능하다는 것 등등 React가 많이 쓰이는 프론트 기술 스택인데는 이유가 있다고 알려주고 싶었습니다. 그래서 이렇게 좋은 기회를 통해 강의할 수 있어 감사했습니다.
강의를 진행하며 학생들의 상태를 체크했을 때 세션 내용을 잘 따라오기도 했고 한 명 한 명 과제를 보았는데 과제 수행률도 높아 의미 있는 시간이었습니다.