코딩게임

Liftcycle # 시작하며 모든 사람이 그러하듯이, 지금까지 공부한 Component에는 Lifecycle, 즉 수명이 존재한다. Component의 수명은 페이지에 렌더링되기 전, 준비 과정에서부터, 페이지에서 사라질 때까지이다. React 프로젝트를 설계함에 있어, 첫 렌더링을 실시할 때 어떠한 작업을 수행하거나, Component 업데이트 전 후로 작업을 수행해야 하는 경우가 발생한다. 이러한 경우에 바로 Lifecycle method를 사용하여 해결할 수 있다(Class Component에서만 가능). # Lifecycle method의 이해 Lifecycle method의 종류는 모두 9가지이다. Will이 붙은 method는 의미와 동일하게 어떤 작업을 작동하기 전에 실행 Did 역시 의미..

ForEach, Map # 시작하며 오늘은 React에서 사용하는 반복문인 ForEach와 Map에 대해 알아볼 것이다. 물론 React 내부에서 For 반복문을 사용할 수도 있지만, ForEach와 Map이 사용되는 이유와, 두 가지 반복문의 차이점에 대해서도 공부해볼 것이다. # ForEach and Map ForEach와 Map에 대해 알아보기 전에, For문에 대해 살펴보면, 기존에 알던 것과 동일하다. for(initialization ; condition ; final-expression) statement 이에 추가로 break와 continue를 사용하여 상태변화를 조정할 수 있다. 다음으로 forEach와 map에 대해 알아보자. 두 가지 모두 반복을 사용한다는 공통점이 있기 때문에 자칫..

Component # 개요 React를 사용하여 애플리케이션, 웹 페이지 인터페이스를 설계할 때, 사용자가 볼 수 있는 요소는 여러 가지 Component로 구성되어 있다. Component는 데이터가 주어지면, 해당 데이터를 통해 UI를 구성하고 api를 이용하여 component가 화면에 나타나고 사라지는 변화를 처리할 수 있다. 또한 임의의 method를 만들어 특별한 기능을 추가하는 것도 가능하다. # 종류 Function Component Class Component # Function Component component를 선언하는 방식은 크게 두 가지로 나뉜다. 하나는 Function Component이고, 다른 하나는 Class Component이다. import React from 'rea..

props and state # 개요 React로 프론트 개발을 한다면, 기본적으로 props와 state에 대한 이해가 필수적이다. 해당 두가지는 데이터를 다룰 때 사용되는 개념으로서 각각의 특징과 쓰임, 차이점에 대해 알아볼 것이다. # Props 불변 데이터 부모로부터 전달 외부(부모) component에서 상속 받는 데이터 먼저 props는 properties의 줄임말로서, state와 확연한 차이를 보이는 것은 불변하는 데이터라는 점이다. component는 부모 component로 부터 props를 받고, 해당 porps는 상속 받은 component에서 사용할 수 있지만, 변경이 불가한 read only 데이터이다. 이것은 React에서 부모 > 자식 일방향성 상속이라는 특징이라 할 수 있다..

Checkbox 오늘은 React로 checkbox를 구현하여 상태관리 하는 방법에 대해 공부해 볼 것이다. # 목표 전체 선택이 가능한 Checkbox와 각 리스트를 구성하는 element Checkbox를 만들어 컴포넌트 상태관리가 가능해야 한다. # 구성 및 설계 - Total Component와 각 List Component를 생성한다. 이때 List는 map 함수를 사용한다. - 반복문 사용시, 일반 배열이 아닌 Set을 사용하여 중복 없이 저장한다. - 배열을 생성하고, useState를 통해 불변성 유지하며 상태를 관리한다. - 각 Component에 Checked와 onChange props를 선언하여 on/off 기능을 구현한다. - 전체 선택과 하나 선택 연동 # 전체적인 UI 틀 구성..