1. 오늘 한 것 (What I Did)

React 공식 문서 'UI 표현하기' 파트 읽고 실습하기

2. 새로 이해한 것 (What I Learned)

2-1. React의 핵심 아이디어

컴포넌트 = 재사용 가능한 UI 블록

  • 기존: HTML/CSS/JS 따로따로 관리
  • React: 관련된 것들을 하나의 컴포넌트로 묶어서 관리
  • 한 번 만들면 여러 곳에서 계속 재사용 가능

React는 상호작용 우선으로 설계됨

  • 예전: HTML 만들고 → JS로 기능 추가
  • 지금: JS 함수 안에 HTML을 포함시켜서 한 번에 관리

2-2. 컴포넌트 만들기 기본 규칙

1. 컴포넌트 이름은 반드시 대문자로 시작

  • Profile ✅ / profile ❌
  • React가 HTML 태그와 컴포넌트를 구분하는 방법

2. 파일 분리와 모듈화

  • 작은 컴포넌트들은 같은 파일에 둬도 OK
  • 복잡해지면 파일 분리하고 export/import 사용
  • Default export vs Named export 구분해서 사용

3. 컴포넌트 중첩 규칙

  • 컴포넌트 안에서 다른 컴포넌트 사용: ✅
  • 컴포넌트 안에서 다른 컴포넌트 정의: ❌ (성능 문제)

2-3. JSX 문법의 특별함

JSX = JavaScript + HTML 하이브리드

  • HTML과 비슷하지만 더 엄격함
  • JavaScript로 변환되기 때문에 JS 규칙 따라야 함

JSX 3대 규칙

  1. 하나의 루트로 감싸기: <div> 또는 <>...</> 사용
  2. 모든 태그 닫기: <img />, <li>...</li> 필수
  3. 캐멀케이스 사용: className, onClick 등

중괄호 = JavaScript 세계로의 창 (?) 

  • {변수명}: 동적 값 표시
  • {함수()}: 함수 호출 결과 표시
  • {{...}}: 이중 중괄호 = JSX 중괄호 + JS 객체

2-4. Props: 컴포넌트 간 소통 방법

Props = 부모 → 자식으로 데이터 전달

  • HTML 속성과 비슷하지만 모든 JavaScript 값 전달 가능
  • 함수의 인수와 똑같은 역할

Props 사용 패턴

  • 구조 분해 할당: function Avatar({ name, size })
  • 기본값 설정: function Avatar({ size = 100 })
  • Children prop: 태그 사이 내용을 children으로 받기

Props의 중요한 특성

  • 읽기 전용: 컴포넌트에서 props 직접 변경 불가
  • 시간에 따라 변함: 매 렌더링마다 새로운 값 받을 수 있음

2-5. 조건부 렌더링: 상황에 따라 다른 UI 보여주기

조건부 렌더링의 4가지 방법

  1. if문: 복잡한 조건 로직에 적합
  2. null 반환: 컴포넌트를 완전히 숨기기
  3. 삼항 연산자 (? :): 두 가지 중 하나 선택
  4. 논리 AND 연산자 (&&): 조건 만족할 때만 표시 (가장 자주 사용)

&& 연산자 주의사항

  • 숫자 0은 falsy하지만 React에서는 그대로 화면에 표시됨
  • 명시적으로 boolean 변환 필요 (예: count > 0 && <Component />)

방법 선택 기준

  • 간단한 on/off → && 사용
  • 두 가지 선택 → ? : 사용
  • 복잡한 로직 → if문 + 변수 사용

2-6. 배열 다루기 (리스트 렌더링)

데이터 배열 → 컴포넌트 배열 변환

  1. filter(): 조건에 맞는 것만 걸러내기
  2. map(): 각 데이터를 컴포넌트로 변환
  3. 결과를 JSX에서 렌더링

Key의 절대적 중요성

  • 왜 필요한가: React가 각 항목을 고유하게 식별하기 위해

2-7. 순수 컴포넌트 = 예측 가능한 컴포넌트

순수 함수의 2가지 특징

  1. 자신의 일만 처리: 외부 변수 건드리지 않기
  2. 같은 입력 → 같은 출력: 수학 공식처럼 일관성

변경 가능 vs 불가능

  • OK: 컴포넌트 내에서 만든 변수/배열 수정
  • NO: 컴포넌트 외부나 이전에 존재한 것들 수정

2-8. React 앱을 트리로 이해하기

2가지 트리 구조

  1. 렌더 트리: 컴포넌트 간 부모-자식 관계
  2. 의존성 트리: 파일 간 import 관계

3. 느낀점 (What I Felt)

JavaScript 기초 부족을 실감했다

  • JavaScript 문법에 익숙하지 않으니 JSX도 당연히 어렵게 느껴진다
  • React를 잘하려면 결국 JavaScript를 잘해야 한다는 것을 뼈저리게 느꼈다
  • 조건부 렌더링, 배열 메서드(filter, map), 구조 분해 할당 등이 모두 JavaScript 기본 개념인데, 이 부분이 약해서 React 이해에도 영향을 주고 있다

실습에서 막히는 부분들

  • 특히 챌린지 도전하기 파트에서 실습할 때 괄호 구분과 사용이 정말 헷갈린다!
  • {}, (), [] 언제 어떤 걸 써야 하는지 아직 감이 안 온다
  • 코드를 많이 안 써봐서 그런 것 같다 - 손에 익지 않았다

이론과 실습의 괴리

  • 개념적으로는 이해가 되는데 막상 코드로 쓰려고 하면 생각이 안 난다
  • 머리로는 알겠는데 손으로는 안 된다는 느낌
  • 나는 바보인가 싶을 정도로 답답하다. 
저작자표시 비영리 변경금지 (새창열림)

티스토리툴바