이 글은 2026년 3월 11일 작성된 글입니다.

오늘은 React의 State 개념, Flex 에 대해 학습하였다.

1. ⚛️ React State

React의 state 변수는 UI와 연결된 데이터를 관리하는 변수이다.

state 값이 변경되면 관련된 UI가 자동으로 다시 렌더링된다.

즉,

상태(State)가 바뀌면 화면(UI)이 다시 그려진다.

2. useState

React에서는 useState 훅을 사용해 상태를 정의한다.

const [color, setColor] = useState("black");

구조

color → 상태 변수
setColor → 상태 변경 함수

상태를 변경할 때는 직접 값을 수정하지 않고 setter 함수를 사용한다.

예시

<button style={{ color: color }} onClick={() => setColor("red")}>
  색 변경
</button>

버튼을 클릭하면

setColor("red");

가 실행되면서 state 값이 변경되고 React가 컴포넌트를 다시 실행하여 UI가 갱신된다.

3. 배열 데이터 삭제 (filter)

리스트 데이터를 삭제할 때는 filter()를 자주 사용한다.

const newItems = items.filter((item, i) => i !== index);

동작

filter()는 조건을 만족하는 요소만 남긴 새로운 배열을 반환
삭제할 index를 제외하고 배열을 다시 생성

4. deleteItem 함수

리스트에서 특정 항목을 삭제할 때 사용한다.

function deleteItem(index) {
  const newItems = items.filter((item, i) => i !== index);
  setItems(newItems);
}

핵심

배열을 직접 수정하지 않는다
새 배열을 만들어 state를 갱신

5. 수정 모드 (isModifyingMode)

UI의 상태를 제어하기 위해 boolean 타입의 state를 사용할 수 있다.

예를 들어 isModifyingMode가 true이면 수정 UI가 보이고, false이면 일반 화면이 보이도록 만들 수 있다.

const [isModifyingMode, setIsModifyingMode] = useState(false);

예시

{isLoggedIn && <button>로그아웃</button>}

true → 로그아웃 토글 표시
false → 버튼 숨김 또는 로그인 토글 표시

React에서는 && 연산자를 사용해 특정 조건에서만 UI를 렌더링하는 패턴을 자주 사용한다.

CSS Flex 정리

6. Flex 개념

Flex는 요소들을 유연하게 배치하기 위한 CSS 레이아웃 방식이다.

기존의 float나 inline-block보다 정렬과 레이아웃을 훨씬 쉽게 만들 수 있다.

Flex 구조

Flex Container : 부모 요소
Flex Item : 자식 요소

7. Flex 시작

.container {
  display: flex;
}

Flex 레이아웃 시작
기본적으로 가로(row) 방향 배치
아이템은 내용 크기만큼 width 차지

8. 축 개념

Flex에는 두 개의 축이 존재한다.

Main Axis (메인축) → 아이템이 배치되는 방향
Cross Axis (교차축) → 메인축과 수직 방향

정렬 기억법

justify → 메인축 정렬 align → 교차축 정렬

9. 배치 방향

flex-direction

flex-direction: row;

row → 가로 배치 (기본값)
column → 세로 배치
row-reverse → 가로 역순
column-reverse → 세로 역순

10. 줄바꿈

flex-wrap

flex-wrap: wrap;

nowrap → 줄바꿈 없음
wrap → 공간 부족 시 줄바꿈

11. 메인축 정렬

justify-content

justify-content: center;

주요 값

flex-start
flex-end
center
space-between
space-around
space-evenly

12. 교차축 정렬

align-items

align-items: center;

주요 값

stretch
flex-start
flex-end
center

완전 중앙 정렬

justify-content: center;
align-items: center;

13. Flex 아이템 크기

flex-basis

flex-basis: 100px;

아이템의 기본 크기 설정

row → width 기준
column → height 기준

14. 남는 공간 분배

flex-grow

flex-grow: 1;

남는 공간을 비율로 나누어 가짐

15. 축약 속성

flex

flex: 1;

아래 속성의 축약형

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

16. 개별 아이템 정렬

align-self

align-self: center;

특정 아이템만 교차축 정렬 변경

17. 순서 변경

order

order: 1;

숫자가 작을수록 먼저 배치

HTML 구조는 바뀌지 않고 시각적인 순서만 변경된다.

18. 1차 팀 프로젝트

처음 만난 팀원들과 소통하며 팀명을 정하고, 간단한 아이스브레이킹을 진행했다. 이 팀원들과 멋있는 결과물을 내고 싶다. 코딩마을 방범대 화이팅 :)

느낀 점

React에서는 state가 UI를 제어하는 핵심 요소라는 것을 이해했다. 특히 filter()를 이용해 배열을 직접 수정하지 않고 새로운 배열을 만들어 상태를 갱신하는 방식이 인상적이었다.

또한 Flex를 통해 레이아웃과 정렬을 훨씬 직관적으로 구성할 수 있다는 것을 알게 되었다.