이 글은 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를 통해 레이아웃과 정렬을 훨씬 직관적으로 구성할 수 있다는 것을 알게 되었다.