728x90
4주차 세션
4주차 세션은 리액트에 대한 실습이 이루어졌다.
리액트는 컴포넌트 단위로 조합과 분해가 쉽다는 장점이 있으며,
상태관리와 변화를 제어하기가 쉽다.
기본 구조는 함수형으로, css는 scss를 활용해 세션을 진행했다.
먼저 Header, Main, Footer를 구분하는 컴포넌트를 생성해 구조를 분해하는 연습을 할 수 있었고,
Main 컴포넌트에서 useState의 상태관리를 이용해 버튼을 누르면 이름이 변경되는 간단한 동작을 넣어보았다.
이름은 state로 상태관리를 했으며 삼하연산자로 이름을 바꾸는 함수를 정의해 기능을 완성할 수 있었다.
const [myName, setName] = useState("Jhon");
function ChangeName(){
setName(myName === "Jhon" ? "Sean" : "Jhon")
}
728x90
4주차 과제는 리액트를 활용해 틱택토 게임을 만들어보는 것이었다.
useState를 이용해 클릭수와 게임 종료 여부를 상태 관리하고,
useRef를 이용해 값을 유지하는 기능을 구현했다.
클릭수가 짝수이면 'X' 표시를 홀수이면 'O;를 표시하도록 하는 함수를 지정하고, 승리조건을 설정해 승리여부를 판단하는 함수를 정의해 승자가 나오면 화면에 표시하도록 구현했다.
완성된 결과물은 다음과 같다.
전체 코드는 깃허브에서 확인할 수 있다.
https://github.com/BB545/likelion/tree/main/04_session
728x90
'동아리 > 멋쟁이 사자처럼' 카테고리의 다른 글
[멋사12기] 리액트(react), axios | 6주차 세션 및 과제 제출 (0) | 2024.05.31 |
---|---|
[멋사12기] 리액트(react) | 5주차 세션 및 과제 제출 (0) | 2024.05.31 |
[멋사12기] 심화JS | 3주차 세션 및 과제 제출 (0) | 2024.04.11 |
[멋사12기] 심화 HTML, CSS, 기초 JS | 2주차 세션 및 과제 제출 (0) | 2024.04.08 |
[멋사12기] HTML, CSS | 1주차 세션 및 과제 제출 (1) | 2024.04.01 |