React Cheat Sheet (기본)

1. 리액트 생태계 (React Ecosystem)

• 리액트 생태계: 리액트를 중심으로 형성된 다양한 라이브러리와 도구들의 집합으로, 효율적인 애플리케이션 개발을 지원합니다.

2. 컴포넌트 (Components)

• 컴포넌트: UI의 재사용 가능한 독립적인 구성 요소로, HTML, CSS, 자바스크립트 로직을 포함합니다.
• 재사용 가능: 동일한 컴포넌트를 여러 곳에서 반복 사용 가능하여 개발 효율성을 높입니다.
• UI 구축: 여러 컴포넌트를 결합하여 전체 사용자 인터페이스(UI)를 구성합니다.
• 범위 설정: 컴포넌트의 기능과 책임을 명확히 정의하여 코드의 가독성과 유지보수성을 향상시킵니다.
• 마크업, 스타일, 자바스크립트 로직: 각 컴포넌트는 HTML 마크업, CSS 스타일, 자바스크립트 로직을 포함하여 UI의 한 부분을 구성하고 제어합니다.

3. 코드 관리 (Code Management)

• 코드 재활용: 컴포넌트를 통해 동일한 코드를 여러 곳에서 재사용함으로써 중복을 줄입니다.
• 오류 가능성 감소: 컴포넌트 단위로 코드를 수정할 수 있어 오류 발생 가능성을 줄입니다.
• 관심사 분리: 각 컴포넌트가 특정 기능을 담당하여 코드의 모듈화와 관리가 용이해집니다.

4. 프론트엔드 프레임워크 (Frontend Frameworks)

• 리액트 외 프레임워크:
  • Angular
  • Vue
  • Svelte
  • Flutter (모바일 개발 프레임워크)
• 컴포넌트 기반 아키텍처: 이러한 프레임워크들도 컴포넌트 기반 아키텍처를 채택하여 유사한 개발 방식을 제공합니다.

5. 프로젝트 관리 (Project Management)

• 복잡도 관리: 컴포넌트화로 복잡한 UI를 작게 분리하여 관리하기 쉽게 만듭니다.
• 개발자 협업: 여러 개발자가 각기 다른 컴포넌트를 담당하여 동시에 작업할 수 있어 협업이 용이합니다.
• 개발 원칙: 컴포넌트 방식은 관심사의 분리와 코드의 모듈화를 통해 유지보수성과 확장성을 높입니다.

6. UI 관련 주요 요소 (UI Components)

• HTML: 구조를 정의하는 마크업 언어.
• CSS: 스타일링을 담당하는 스타일 시트 언어.
• 유저 인터페이스 (UI): 사용자와 상호작용하는 화면 요소들.
• 빌딩 블록: UI를 구성하는 기본 단위들 (예: 헤더, 푸터, 버튼 등).
• 헤더: 웹사이트나 애플리케이션의 상단 부분을 구성하는 컴포넌트.
• 상호작용 탭: 사용자 입력과 상호작용을 처리하는 컴포넌트.

7. JSX (JavaScript Syntax Extension)

• 확장자: .jsx
• 기능:
  • 자바스크립트 파일 내에 HTML 마크업 작성 가능
  • UI의 전체와 부분을 설명 및 생성
• 주의사항:
  • 브라우저에서 직접 사용 불가
  • 개발 서버에서 변환 필요

8. React 컴포넌트

• 정의:

  • 자바스크립트 함수와 유사
  • UI의 재사용 가능한 부분

• 규칙:

  1. 함수 이름은 대문자로 시작
  2. 렌더링 가능한 값 반환 (주로 JSX 코드)

• 생성 방법:

  • 평범한 자바스크립트 함수 작성
  • 대문자로 시작하는 이름 부여
  • JSX 코드 반환

9. 컴포넌트 생성

• 새 컴포넌트 파일 추가:

  • 기존 App.jsx 파일 외에 새로운 파일에 컴포넌트 작성 가능

• 자바스크립트 함수로 생성:

  • 리액트 컴포넌트는 단순한 자바스크립트 함수

function Header() {
  return (
    <header>
      <h1>제목</h1>
      <img src="logo.png" alt="로고" />
    </header>
  );
}

10. 컴포넌트 이름 규칙

• 대문자로 시작:
  • 컴포넌트 이름은 반드시 대문자로 시작해야 함
  • 예: Header, Footer, Sidebar

11. 오류 방지 팁

• 컴포넌트 이름 확인:

  • 대문자로 시작하지 않으면 컴포넌트로 인식되지 않음

• JSX 문법 준수:

  • 모든 태그는 닫혀야 함
  • 중첩된 태그의 올바른 구조 유지

12. 이미지 불러오기 및 사용

// Header.jsx
import React from 'react';
import reactImg from './assets/react-core-concepts.png';

function Header() {
  return (
    <header>
      <h1>React 동적 이미지 예제</h1>
      <img src={reactImg} alt="React Core Concepts" />
    </header>
  );
}

export default Header;

13. 컴포넌트 재사용의 중요성

• 재사용 가능성:
  • 동일한 컴포넌트를 여러 번 사용할 수 있어 코드 중복 감소
  • 예: 여러 헤더나 카드 컴포넌트
• 유연성:
  • 각 사용 시 다른 데이터를 전달하여 다양한 결과 생성

14. Props 개념 이해

• Props 정의:
  • 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법
• Props의 역할:
  • 컴포넌트의 동적 데이터 설정
  • 컴포넌트의 재사용성을 높임

15. 컴포넌트에 Props 전달하기

• 커스텀 속성 추가:

  • 컴포넌트를 사용할 때 원하는 속성을 추가

    <CoreConcept
      title="Components"
      description="핵심 UI 빌딩블록"
      image={componentsImg}
    />

• 다양한 데이터 전달:

  • 문자열, 숫자, 객체, 배열 등 모든 종류의 데이터 전달 가능

16. Props를 받는 컴포넌트 작성

• 컴포넌트 함수 매개변수로 props 사용:

  • 일반적으로 props라는 이름 사용

    function CoreConcept(props) {
      return (
        <li>
          <img src={props.image} alt={props.title} />
          <h3>{props.title}</h3>
          <p>{props.description}</p>
        </li>
      );
    }

• 객체로 전달된 Props 사용:

  • props는 키-값 쌍을 가진 객체
  • 각 속성은 props.속성명으로 접근

17. Props를 통한 데이터 관리

• 동적 데이터 사용:
  • 각 컴포넌트 사용 시 다른 데이터를 전달하여 다양한 내용 표시
• 데이터 유형:
  • 문자열, 숫자, 객체, 배열 등 다양한 데이터 유형 전달 가능
• 이미지 전달:
  • import를 사용하여 이미지 파일을 불러오고 Props로 전달

18. Props 활용 시 주의사항

• 고유 키 지정 (리스트 사용 시):

  • 여러 컴포넌트를 리스트로 렌더링할 때 고유 key 속성 필수

    <CoreConcept
      key={uniqueId}
      title="Components"
      description="핵심 UI 빌딩블록"
      image={componentsImg}
    />

19. Props 명명 규칙:

• 일관된 명명 규칙 사용 (예: camelCase)

20. Props 불변성 유지:

• 자식 컴포넌트에서 Props 수정 금지

21. 컴포넌트 재사용 및 Props 전달

• 컴포넌트 재사용
  • 동일한 컴포넌트를 여러 번 사용하여 코드 중복 최소화
  • 각 사용 시 다른 데이터를 전달
• Props 전달 방법:
  • 커스텀 속성 추가

<CoreConcept
  title={CORE_CONCEPTS[0].title}
  description={CORE_CONCEPTS[0].description}
  image={CORE_CONCEPTS[0].image}
/>

22. 스프레드 연산자를 사용한 Props 전달

{CORE_CONCEPTS.map((concept, index) => (
  <CoreConcept key={index} {...concept} />
))}

23. Props를 받는 컴포넌트 작성 / 구조 분해 할당 (Destructuring) 사용:

// CoreConcept.jsx
function CoreConcept({ title, description, image }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

export default CoreConcept;

24. 고유 키 (key) 속성 사용

• 리스트 렌더링 시 key 속성 필수:
  • 각 컴포넌트에 고유한 key 제공

{CORE_CONCEPTS.map((concept, index) => (
  <CoreConcept key={index} {...concept} />
))}

25. 코드 최적화 및 간결화

• 스프레드 연산자 사용:
  • Props 전달을 간소화하여 코드 줄이기
• 구조 분해 할당 활용:
  • Props를 개별 변수로 분리하여 가독성 향상

26. 개별 Props 전달

<CoreConcept
  title={CORE_CONCEPTS[0].title}
  description={CORE_CONCEPTS[0].description}
  image={CORE_CONCEPTS[0].image}
/>

27. Spread Operator (...)를 사용한 Props 전달

<CoreConcept {...CORE_CONCEPTS[0]} />

28. 단일 Prop 객체 전달

<CoreConcept concept={CORE_CONCEPTS[0]} />

29. Rest Property를 사용한 Props 그룹화

export default function CoreConcept({ ...concept }) {
  const { title, description, image } = concept;
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

30. 선택적 Props와 기본값

export default function Button({ caption, type = "submit" }) {
  return <button type={type}>{caption}</button>;
}

31. 구조 분해 할당 (Destructuring) / Props를 개별 변수로 분리

export default function CoreConcept({ title, description, image }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

32. 단일 객체로 Props 그룹화

export default function CoreConcept({ concept }) {
  const { title, description, image } = concept;
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

33. children Prop

• 설명: 컴포넌트 태그 사이에 있는 내용을 전달

// TabButton.jsx
export default function TabButton({ children }) {
  return (
    <li>
      <button>{children}</button>
    </li>
  );
}

• children Prop 전달 방법

// App.jsx
<TabButton>Components</TabButton>
<TabButton>Props</TabButton>
<TabButton>State</TabButton>
<TabButton>Lifecycle</TabButton>

34. 컴포넌트 합성 (Composition)

• 설명: 컴포넌트를 다른 컴포넌트나 내용으로 감싸서 사용

// App.jsx
<ul>
  <TabButton>Components</TabButton>
  <TabButton>Props</TabButton>
  <TabButton>State</TabButton>
  <TabButton>Lifecycle</TabButton>
</ul>

35. children Prop과 구조 분해

// TabButton.jsx
export default function TabButton({ children }) {
  return (
    <li>
      <button>{children}</button>
    </li>
  );
}

36. 컴포넌트 상호작용 추가

• 이벤트 핸들러 함수 정의

// TabButton.jsx
import React from 'react';

export default function TabButton({ children, onClick }) {
  return (
    <li>
      <button onClick={onClick}>{children}</button>
    </li>
  );
}

// App.jsx
import React from 'react';
import { CORE_CONCEPTS } from './data';
import CoreConcept from './CoreConcept';
import TabButton from './TabButton';

function App() {
  const handleClick = (buttonName) => {
    console.log(`Hello World! Button ${buttonName} clicked.`);
  };

  return (
    <div>
      <Header />
      <section id="core-concepts">
        <h2>Core Concepts</h2>
        <ul>
          {CORE_CONCEPTS.map((concept, index) => (
            <CoreConcept key={index} {...concept} />
          ))}
        </ul>
      </section>
      <section id="examples">
        <h2>Examples</h2>
        <menu>
          <TabButton onClick={() => handleClick('Components')}>Components</TabButton>
          <TabButton onClick={() => handleClick('Props')}>Props</TabButton>
          <TabButton onClick={() => handleClick('State')}>State</TabButton>
          <TabButton onClick={() => handleClick('Lifecycle')}>Lifecycle</TabButton>
        </menu>
      </section>
    </div>
  );
}

export default App;

37. 선언적 이벤트 처리 방식

• 명령형 vs 선언형 코드

  • 명령형 코드: 전통적인 자바스크립트 방식으로 DOM 요소에 직접 이벤트 리스너 추가
  • 선언형 코드: React에서 onClick과 같은 Prop을 사용하여 이벤트 처리

• React의 선언적 이벤트 처리

  • 장점: 코드의 가독성 및 유지보수성 향상, React의 상태 관리와 자연스럽게 통합

<button onClick={handleClick}>Click Me</button>

38. 함수 이름만 전달하기

• 설명: 이벤트 핸들러는 함수 이름만 전달하고 호출하지 않음
  • 잘못된 예시:

<button onClick={handleClick()}>Click Me</button> // 즉시 실행됨

• 올바른 예시:

<button onClick={handleClick}>Click Me</button> // 클릭 시 실행

39. 인수를 전달할 경우 화살표 함수 사용

• 설명: 인수를 전달할 때는 화살표 함수를 사용하여 클릭 시 실행되도록 함
• 예시:

<TabButton onClick={() => handleClick('Components')}>Components</TabButton>

40. Dynamic Content 설정

// App.jsx
<section id="dynamic-content">
  <h2>Dynamic Content</h2>
  <p>{dynamicContent}</p>
</section>

41. 상태 관리 (useState)

• 설명: 버튼 클릭에 따라 내용을 동적으로 업데이트하기 위해 상태(State)를 사용

// App.jsx
import React, { useState } from 'react';
import TabButton from './TabButton';

function App() {
  const [dynamicContent, setDynamicContent] = useState('Select a button');

  const handleSelect = (content) => {
    setDynamicContent(content);
  };

  return (
    <div>
      <section id="examples">
        <menu>
          <TabButton onSelect={() => handleSelect('Components Content')}>Components</TabButton>
          <TabButton onSelect={() => handleSelect('Props Content')}>Props</TabButton>
          <TabButton onSelect={() => handleSelect('State Content')}>State</TabButton>
          <TabButton onSelect={() => handleSelect('Lifecycle Content')}>Lifecycle</TabButton>
        </menu>
      </section>
      <section id="dynamic-content">
        <h2>Dynamic Content</h2>
        <p>{dynamicContent}</p>
      </section>
    </div>
  );
}

export default App;

42. 탭메뉴 어플리케이션

• 데이터 흐름 도식화

[컴포넌트 트리]
App
├── TabButton (x4)
│     └── onClick 이벤트 발생
│         ↓
│     handleSelect 함수 호출
│     └── 화살표 함수로 클릭된 버튼 식별자 전달
│
└── Dynamic Content
      └── 버튼에 따라 동적으로 업데이트

• 이벤트 흐름 도식화

1. TabButton 컴포넌트 클릭
   (사용자가 버튼을 클릭)
   └── 이벤트 발생: onClick
        ↓
2. 화살표 함수 실행
   └── onSelect={() => handleSelect('버튼명')}
        ↓
3. App 컴포넌트의 handleSelect 함수 실행
   └── handleSelect('버튼명')
        ↓
4. 버튼명(selectedButton)에 따라 if 조건문 처리
   └── if (selectedButton === 'Components') { ... }
        ↓
5. setDynamicContent 함수 호출
   └── setDynamicContent('선택된 콘텐츠')
        ↓
6. App 컴포넌트의 Dynamic Content 영역 업데이트
   └── <p>{dynamicContent}</p>

• 컴포넌트 트리 도식화

App 컴포넌트
  ├── <menu> 요소
  │     ├── TabButton 컴포넌트 ('Components')
  │     ├── TabButton 컴포넌트 ('JSX')
  │     ├── TabButton 컴포넌트 ('Props')
  │     └── TabButton 컴포넌트 ('State')
  │
  └── Dynamic Content 영역
        └── 클릭된 버튼에 따라 업데이트되는 <p> 태그

43. 변수로 UI 업데이트 실패 원인

• 변수 사용으로 UI 업데이트 불가
  • 설명: 일반적인 변수를 사용해 UI를 업데이트하면 리액트가 컴포넌트를 다시 렌더링하지 않기 때문에 UI가 업데이트되지 않음

let tabContent = 'Please click a button';

• 리액트의 JSX 코드 재평가
• 설명: 리액트는 초기 렌더링 시 컴포넌트 함수를 한 번만 실행하고 그 후에는 상태가 변하지 않으면 다시 실행하지 않음
• 예시: handleSelect 함수에서 변수를 변경해도 UI가 재평가되지 않음

44. 리액트 상태(state) 사용

• 상태(state)를 이용한 UI 업데이트
  • 설명: 리액트의 상태 관리(useState)를 사용해야만 UI가 동적으로 업데이트됨

const [tabContent, setTabContent] = useState('Please click a button');

• 상태 업데이트로 컴포넌트 재렌더링
  • 설명: 상태가 변경되면 리액트는 해당 컴포넌트를 다시 실행하여 UI를 업데이트

const handleSelect = (selectedButton) => {
  setTabContent(selectedButton);
};

45. 리액트 렌더링 동작 이해

• 초기 렌더링
  • 설명: 리액트는 컴포넌트 함수를 처음 실행할 때 JSX 코드를 렌더링하고 이후 상태 변화가 없으면 다시 실행하지 않음
• 이벤트 발생 후 상태 변경
  • 설명: 버튼 클릭과 같은 이벤트로 상태가 변경되면, 리액트는 해당 상태가 포함된 컴포넌트를 재평가하고 UI를 업데이트함

46. useState Hook 사용법

• useState로 상태 초기화
  • 설명: useState는 상태를 관리하는 리액트 Hook으로, 컴포넌트의 상태를 초기화할 수 있음

const [selectedTopic, setSelectedTopic] = useState('Please click a button');

• 상태 변경 함수 사용
  • 설명: useState에서 반환되는 두 번째 요소는 상태를 업데이트하는 함수로, 이를 호출하면 리액트가 컴포넌트를 재실행하여 UI를 업데이트함

const handleSelect = (selectedButton) => {
  setSelectedTopic(selectedButton);
};

47. 리액트 Hook 규칙

• 컴포넌트 최상위에서 호출
  • 설명: 모든 리액트 Hook은 컴포넌트 함수의 최상위에서 호출해야 하며, 내부 함수나 조건문, 반복문 내에서 호출하면 안 됨

// 올바른 사용
const [state, setState] = useState('초기값');

// 잘못된 사용
if (true) {
  const [state, setState] = useState('초기값'); // 오류 발생
}

• 리액트 Hook 함수는 리액트 컴포넌트 또는 커스텀 Hook 안에서만 호출 가능
  • 설명: useState 같은 리액트 Hook은 리액트 컴포넌트나 커스텀 Hook에서만 호출해야 함

48. 상태 스냅샷 및 컴포넌트 재실행

• 상태 스냅샷
  • 설명: useState의 첫 번째 요소는 컴포넌트 실행 시의 상태 스냅샷을 나타내며, 상태가 업데이트되면 컴포넌트가 다시 실행됨
• 컴포넌트 재실행 및 리렌더링
  • 설명: 상태가 변경되면 리액트는 해당 컴포넌트를 다시 실행하여 UI를 리렌더링

49. 상태 업데이트 스케줄

• 상태 업데이트와 콘솔 로그 차이
  • 설명: 상태 업데이트는 비동기적으로 실행되며, 상태가 변경된 후 컴포넌트가 재실행될 때 새 상태 값을 사용할 수 있음

const handleSelect = (selectedButton) => {
  setSelectedTopic(selectedButton);
  console.log(selectedTopic); // 이전 상태 출력
};

• 업데이트된 상태 값은 컴포넌트가 다시 실행된 후에만 반영됨
  • 설명: setSelectedTopic으로 상태를 업데이트하면 즉시 값이 반영되는 것이 아니라, 다음 컴포넌트 재실행 시 새로운 상태 값을 사용할 수 있음

50. 상태 초기화 및 오류 해결

• 초기 상태 값 설정
  • 설명: 초기 상태값으로 components와 같은 유효한 식별자를 설정해 오류 방지.

const [selectedTopic, setSelectedTopic] = useState('components'); // 유효한 초기 값 설정

• 조건부 렌더링으로 오류 방지
  • 설명: 초기 상태가 유효하지 않으면 렌더링하지 않도록 조건부 렌더링 추가.

{EXAMPLES[selectedTopic] && (
  <div id="tab-content">
    <h3>{EXAMPLES[selectedTopic].title}</h3>
    <p>{EXAMPLES[selectedTopic].description}</p>
    <pre>{EXAMPLES[selectedTopic].code}</pre>
  </div>
)}

51. 조건부 렌더링 방법

• 삼항 연산자를 사용한 조건부 렌더링
  • 설명: 삼항 연산자를 사용하여 주제가 선택되지 않았을 때 대체 텍스트를, 선택되었을 때 콘텐츠를 렌더링.

{selectedTopic ? (
  <div id="tab-content">
    <h3>{EXAMPLES[selectedTopic].title}</h3>
    <p>{EXAMPLES[selectedTopic].description}</p>
    <pre>{EXAMPLES[selectedTopic].code}</pre>
  </div>
) : (
  <p>Please select a topic</p>
)}

• 논리적 AND 연산자(&&)를 사용한 조건부 렌더링
  • 설명: 논리적 AND 연산자를 사용하여 조건이 참일 때만 렌더링.

{selectedTopic && (
  <div id="tab-content">
    <h3>{EXAMPLES[selectedTopic].title}</h3>
    <p>{EXAMPLES[selectedTopic].description}</p>
    <pre>{EXAMPLES[selectedTopic].code}</pre>
  </div>
)}

52. 변수 사용한 조건부 렌더링

• 변수를 사용해 JSX 코드 저장
• 설명: tabContent 변수에 조건부로 JSX 코드를 저장하고, 렌더링 시 해당 변수를 출력.

let tabContent = <p>Please select a topic</p>;

if (selectedTopic) {
  tabContent = (
    <div id="tab-content">
      <h3>{EXAMPLES[selectedTopic].title}</h3>
      <p>{EXAMPLES[selectedTopic].description}</p>
      <pre>{EXAMPLES[selectedTopic].code}</pre>
    </div>
  );
}

53. className을 통한 동적 스타일링

• className으로 스타일 적용
  • 설명: 리액트에서 className prop을 사용해 HTML 요소에 CSS 클래스를 설정.

<button className="active">Tab</button>

• JSX에서 className을 사용
  • 설명: JSX에서는 HTML의 class 대신 className을 사용해야 함.

<button className={isSelected ? 'active' : ''}>Tab</button>

54. 동적 클래스 설정 (조건부 스타일링)

• 삼항 연산자를 통한 동적 className 설정
  • 설명: 삼항 연산자를 사용하여 선택 여부에 따라 CSS 클래스를 조건부로 설정.

<button className={isSelected ? 'active' : ''}>Tab</button>

55. JSX 배열 렌더링

• JSX는 배열 형태의 요소를 렌더링할 수 있으며, 배열의 항목을 화면에 동적으로 출력할 수 있음.

const coreConcepts = ['Components', 'JSX', 'Props'];
return (
  <ul>
    {coreConcepts.map(concept => <CoreConcept key={concept.id} title={concept} />)}
  </ul>
);

56. 데이터 기반으로 컴포넌트 생성

• 설명: 배열 데이터를 기반으로 컴포넌트를 자동으로 생성하여 중복된 코드 작성을 방지.

const coreConcepts = [{title: 'Components', description: '...'}, {title: 'JSX', description: '...'}];
return (
  <div>
    {coreConcepts.map(concept => (
      <CoreConcept key={concept.title} title={concept.title} description={concept.description} />
    ))}
  </div>
);

57. key prop 설정

• 고유 key prop 설정
• 설명: React는 각 리스트 아이템에 고유한 key prop이 필요하며, 이를 통해 효율적으로 렌더링과 업데이트를 관리.

{coreConcepts.map(concept => (
  <CoreConcept key={concept.title} title={concept.title} />
))}

58. key prop으로 경고 제거

• 설명: key prop은 각 리스트 항목을 고유하게 식별하기 위해 사용되며, 이를 추가하지 않으면 React가 경고를 출력.

// 고유한 값인 title을 key로 설정
<CoreConcept key={concept.title} title={concept.title} />

59. JSX 코드와 createElement

• JSX 코드
  • 설명: 리액트에서 JSX는 자바스크립트 코드 안에서 HTML을 작성할 수 있도록 하는 문법 확장.

const element = <h1>Hello, World!</h1>;

• React.createElement
  • 설명: JSX 없이 리액트 요소를 생성할 때 사용하는 메소드. JSX 코드의 대체 방식.

const element = React.createElement('h1', null, 'Hello, World!');

60. JSX를 대체하는 createElement

• JSX와 createElement 비교
• JSX 예시:

const app = <App />;

• createElement 예시:

const app = React.createElement(App, null);

• createElement 함수 구조
  • 설명: createElement는 3가지 인수를 받음:
    1. 컴포넌트 타입: 생성할 컴포넌트나 태그 (예: 'div', App)
    2. props 객체: 컴포넌트에 전달할 props (없다면 null)
    3. child 요소: 컴포넌트 안에 포함될 자식 요소들

const element = React.createElement('div', { className: 'container' }, 'Hello, World!');

61. 빌드 과정과 JSX

• JSX 코드의 빌드 과정

  • 설명: JSX는 브라우저에서 바로 실행되지 않기 때문에, 빌드 과정에서 createElement로 변환되어 실행됨.

  • 빌드 전 예시 (JSX):

    const element = <h1>Hello, World!</h1>;

  • 빌드 후 예시 (createElement로 변환):

    const element = React.createElement('h1', null, 'Hello, World!');

• 빌드 과정 없이 리액트 사용

  • 설명: 빌드 없이 JSX를 사용하지 않고 리액트를 사용하려면 createElement 메소드를 직접 사용하여 컴포넌트를 생성.

62. React 프로젝트에서 JSX와 createElement 선택

• JSX의 편리함
  • 설명: 대부분의 리액트 프로젝트는 JSX를 사용하여 더 직관적이고 간결하게 작성.
  • 예시 (JSX가 더 간결한 이유):

const element = <h1 className="header">Hello, World!</h1>;

• createElement를 사용할 수 있는 경우
  • 설명: 빌드 과정이 없거나 JSX를 사용할 수 없는 환경에서 createElement 메소드를 대체 사용.
  • 예시 (빌드 과정 없이):

const element = React.createElement('h1', { className: 'header' }, 'Hello, World!');

63. JSX와 createElement 선택

• 설명: 빌드 과정이 필요한 환경에서는 JSX를 사용하는 것이 더 편리하고 가독성이 좋음. 빌드 과정이 없는 환경에서는 createElement 메소드를 사용하여 컴포넌트를 생성.

64. JSX 코드의 변환 이해

• 설명: JSX 코드는 빌드 도구(Babel 등)를 통해 React.createElement로 변환됨. 이를 통해 JSX 없이도 동일한 결과를 얻을 수 있음.

65. JSX 표현식의 규칙

• JSX는 하나의 부모 요소가 필요

  • 설명: JSX에서 여러 형제 요소를 반환하려면 하나의 부모 요소로 감싸야 함.

  • 예시 (잘못된 코드):

    return (
      <h1>Header</h1>
      <p>Main Content</p>
    );

  • 예시 (수정된 코드):

    return (
      <div>
        <h1>Header</h1>
        <p>Main Content</p>
      </div>
    );

66. 형제 요소를 반환하려면 Fragment 사용

• 설명: 불필요한 div 태그 없이 형제 요소를 반환하고 싶을 때, React.Fragment 또는 빈 태그(<> </>)를 사용.

return (
  <React.Fragment>
    <h1>Header</h1>
    <p>Main Content</p>
  </React.Fragment>
);

• 빈 태그(<> </>)로 Fragment 대체
  • 설명: 최신 리액트에서는 React.Fragment 대신 빈 태그(<> </>)를 사용 가능.

return (
  <>
    <h1>Header</h1>
    <p>Main Content</p>
  </>
);

67. 컴포넌트 분할의 필요성

• root 컴포넌트가 너무 많은 역할을 하는 경우

  • 설명: 하나의 컴포넌트가 너무 많은 책임을 맡고 있다면, 코드를 관리하기 어려워짐.
  • 신호: 컴포넌트가 다양한 섹션(예: 헤더, 탭 버튼, 상호작용 섹션)과 상태를 관리하는 경우.
  • 해결책: 컴포넌트를 더 작은 하위 컴포넌트로 나누어 책임을 분리함.

• 컴포넌트를 쪼개는 이유

  • 설명: 컴포넌트를 잘게 나누면, 상태 관리와 재실행이 더 명확해지고, 특정 역할에 맞는 책임을 부여할 수 있음.
  • 예시:
    • Header 컴포넌트: 상단 텍스트 관리
    • TabButton 컴포넌트: 탭 버튼 관리
    • InteractiveSection 컴포넌트: 상호작용 섹션 관리

68. 상태 관리와 컴포넌트 재실행

• 상태 관리(state management)

  • 설명: 컴포넌트의 상태가 변경되면 리액트는 해당 컴포넌트와 그 하위 컴포넌트를 재실행(re-render)함.
  • 예시: selectedTopic 상태가 변경되면, 전체 App 컴포넌트가 재실행되고, 상태를 사용하는 모든 하위 컴포넌트도 재실행됨.

• 컴포넌트 재실행의 영향

  • 설명: 컴포넌트가 재실행되면, 모든 JSX 코드가 다시 평가되고 화면이 업데이트됨. 이때, 불필요한 재실행을 방지하기 위해 상태를 적절히 분할하는 것이 중요.
  • 예시:
    • App 컴포넌트가 재실행될 때 Header 컴포넌트도 불필요하게 재실행되므로, 상태를 분리하여 최적화 가능.

69. 컴포넌트 분리 전략

• 상호작용이 있는 부분을 별도의 컴포넌트로 분리

  • 설명: App 컴포넌트에서 상호작용 섹션과 같은 역할이 명확한 부분을 별도의 컴포넌트로 분리하여 상태 관리와 재실행을 최소화할 수 있음.
  • 예시:
    • Header 컴포넌트를 분리하여 selectedTopic 상태에만 의존하게 하고, 상태 변경 시에만 재실행되도록 최적화.

• 상태를 사용하지 않는 부분도 컴포넌트로 분리

  • 설명: 상태와 무관한 부분도 분리하여, 상태가 변경될 때 해당 부분이 불필요하게 재실행되지 않도록 함.
  • 예시: 정적 컨텐츠를 렌더링하는 컴포넌트는 상태 변경 시 재실행되지 않음.

// 데이터 흐름 도식화

[컴포넌트 트리]
App
├── Header
│     └── selectedTopic 상태에 따라 텍스트 업데이트
│
├── TabButtons
│     └── 탭 버튼 클릭 시 selectedTopic 상태 변경
│
└── InteractiveSection
      └── 상호작용 요소 관리

// 상태 관리 및 컴포넌트 재실행 흐름

1. 탭 버튼 클릭
   └── selectedTopic 상태 업데이트
        ↓
2. App 컴포넌트 재실행
   └── selectedTopic 상태가 변경되면 전체 App 컴포넌트가 재실행됨
        ↓
3. Header 컴포넌트도 재실행
   └── Header 컴포넌트는 selectedTopic 상태를 사용하므로 재실행됨
        ↓
4. InteractiveSection은 상태 변경에 영향을 받지 않으면 재실행되지 않음

70. 상태 관리와 컴포넌트 재실행 (State Management & Re-rendering)

• 상태 관리 분리

  • 설명: selectedTopic 상태를 App 컴포넌트에서 Examples 컴포넌트로 이동하여, App 컴포넌트가 재실행되지 않게 최적화.
  • 예시:
    • Examples 컴포넌트 내에서 상태 관리.
    • App 컴포넌트는 상태와 무관한 부분만 렌더링.

• 상태 변경과 재실행 방지

  • 설명: 상태가 변경될 때 관련된 컴포넌트만 재실행되도록 상태를 관리하여 불필요한 재실행 방지.

// 파일 구조 예시

/components
  ├── CoreConcepts.jsx
  ├── Examples.jsx
  ├── TabButton.jsx
  └── CoreConcept.jsx
/data.js
App.jsx

// 데이터 흐름 도식화

[컴포넌트 트리]
App
├── CoreConcepts
│     └── CORE_CONCEPTS 데이터를 렌더링
│
└── Examples
      ├── TabButton
      │     └── 탭 버튼 클릭 시 handleSelect 함수로 selectedTopic 상태 업데이트
      └── selectedTopic 상태에 따라 EXAMPLES 데이터 출력

// 상태 관리 및 컴포넌트 재실행 흐름

1. 탭 버튼 클릭
   └── selectedTopic 상태 업데이트 (Examples 컴포넌트 내부)
        ↓
2. Examples 컴포넌트 재실행
   └── selectedTopic 상태가 변경되어 해당 부분만 재실행됨
        ↓
3. App 컴포넌트는 재실행되지 않음
   └── App 컴포넌트는 상태 관리에서 제외되었기 때문

71. Forwarded Props (전달 속성)

• 설명: props가 커스텀 컴포넌트에서 자동으로 전달되지 않기 때문에, 수동으로 구조 분해를 통해 특정 속성을 전달해야 함.
• 해결 방법
  • 설명: 구조 분해 또는 forwarded props를 사용하여, 해당 속성을 자동으로 HTML 요소에 전달되도록 함.

// Section.jsx
export default function Section({ title, children, ...props }) {
  return (
    <section {...props}>
      <h2>{title}</h2>
      {children}
    </section>
  );
}

72. JSX 코드에서 다중 슬롯 설정 (Slot System)

• 기본 Slot 개념
  • 설명: 여러 요소를 동적으로 배치할 수 있는 슬롯을 설정하는 방법. 특정 위치에 JSX 요소를 전달하는 방식으로 컴포넌트를 유연하게 사용할 수 있음.

// Tabs.jsx
function Tabs({ buttons, children }) {
  return (
    <>
      <menu>
        {buttons}
      </menu>
      <div>
        {children}
      </div>
    </>
  );
}

// Examples.jsx
<Tabs buttons={
  <>
    <TabButton onClick={() => handleSelect('Components')}>Components</TabButton>
    <TabButton onClick={() => handleSelect('JSX')}>JSX</TabButton>
  </>
}>
  {tabContent}
</Tabs>

73. Static Markup

• Static Markup (정적인 마크업): 변하지 않는 요소(예: 헤더)들은 React 컴포넌트 외부에, 예를 들어 index.html에 작성할 수 있음. 이런 정적인 요소는 React의 상태나 속성에 영향을 받지 않음.

74. Props and State

• Props (속성): 부모 컴포넌트가 자식 컴포넌트로 전달하는 데이터. 상태 변화가 필요 없는 정적 요소는 props로 전달할 필요 없음.
• State (상태): React에서 동적으로 변하는 데이터는 컴포넌트의 state로 관리.

75. Public Folder and Image Rendering

• Public Folder (공유 폴더): public 폴더에 저장된 파일들은 웹사이트 방문자도 접근 가능. 이미지와 같은 파일을 public 폴더에 넣으면 경로 없이 바로 참조 가능.

<img src="/game-logo.png" alt="Hand-drawn Tic-Tac-Toe" />

76. 폴더 구조

• public 폴더: 이 폴더에 저장된 파일은 개발 서버와 빌드 프로세스를 통해 직접 브라우저에서 접근 가능.
  • 예: localhost:5173/some-image.jpg
  • 용도: 파비콘, index.html에서 사용하는 이미지 등 빌드 과정이 필요 없는 정적인 리소스.
• src/assets 폴더: 프로젝트 내부의 코드에서 import되어 사용되는 이미지. 직접 참조 불가, 코드에서 import된 후 빌드 시 최적화되어 사용.
  • 용도: 컴포넌트에서 사용하는 이미지 또는 동적으로 처리되는 리소스.

77. 이미지 참조

• public 폴더 이미지 참조
  • 파일을 직접적으로 index.html이나 index.css에서 참조 가능.
  • URL을 통해 직접 접근 가능 (localhost:5173/이미지_이름.jpg).
• src 폴더 이미지 참조
  • React 코드에서 import하여 참조.
  • 빌드 시 자동 최적화 및 경로 처리.

import someImage from './assets/some-image.jpg';
<img src={someImage} alt="Example" />;

78. 빌드 프로세스와 최적화

• public 폴더: 빌드 과정에서 변경되지 않음. 정적 파일로 그대로 제공.
• src 폴더: 빌드 과정에서 최적화되고, 참조한 이미지 파일은 필요한 위치로 자동 이동.

79. 웹사이트 방문자 접근

• public 폴더: 웹사이트 방문자가 직접 접근 가능.
• src 폴더: 웹사이트 방문자는 직접 접근 불가. 코드에서 참조된 경우에만 제공.

80. 어떤 폴더를 사용해야 할까?

• public 폴더: 빌드 프로세스에서 처리되지 않으며, 공개적으로 접근 가능한 이미지나 정적 리소스.
• src 폴더: 컴포넌트 내에서 사용되는 동적인 리소스, 최적화가 필요한 이미지.

81. 상태 변경 함수 (State Update Function)

• 목적: 리액트에서 상태를 변경할 때 사용하는 함수 (setState 계열).
• 함수 전달 방식: 상태를 변경할 때, 이전 상태에 기반해야 할 경우 함수 형태를 전달.

setState((prevState) => !prevState);

82. 리액트의 상태 변경 스케줄

• 목적: 리액트는 상태 변경을 즉각 실행하지 않고, 상태 변경 스케줄을 관리하여 비동기적으로 처리.
• 중요성: 상태 변경은 컴포넌트가 렌더링되는 동안 즉각 실행되지 않으므로, 최신 상태값을 사용하려면 함수 형태의 상태 변경을 사용해야 함.

83. 상태 변경의 비동기적 특성

• 목적: 리액트는 상태 변경을 즉시 반영하지 않으며, 스케줄링을 통해 차후에 반영함.
• 방법: 상태 변경 함수 호출 시, 리액트는 최신 상태값을 비동기적으로 가져옴.

84. 컴포넌트 렌더링 사이클

• 목적: 상태 변경 후 컴포넌트는 다시 렌더링되며, 해당 렌더링 사이클 내에서 상태가 업데이트됨.
• 방법: 컴포넌트의 렌더링 사이클을 고려하여 상태 변경 로직을 설계.

85. useState 훅

• 설명: 리액트에서 상태를 선언하고 관리할 수 있는 훅. 상태와 상태를 변경하는 함수를 반환.

const [state, setState] = useState(initialState);

• 상태 업데이트 (State Update)
  • 설명: 상태를 변경하고 리액트에서 UI가 다시 렌더링되도록 하는 과정.
  • 방법: 상태 변경 함수(setState)를 호출하여 새로운 값을 설정.

setPlayerName(newName);

86. 이벤트 핸들러 (Event Handler)

• 설명: 특정 이벤트가 발생했을 때 실행되는 함수.
• 예시: 사용자가 input 필드에 값을 입력하면 onChange 이벤트가 실행됨.

const handleChange = (event) => {
  setPlayerName(event.target.value);
};

87. onChange 이벤트

• 설명: 입력 필드에서 발생하는 이벤트로, 사용자가 입력할 때마다 호출됨.
• 사용: onChange 속성에 함수 연결.

<input value={playerName} onChange={handleChange} />

88. 입력 필드 제어 (Controlled Input)

• 설명: 리액트에서 입력 필드의 값을 상태로 관리하여, UI와 데이터를 일관성 있게 유지.

<input value={editablePlayerName} onChange={handleChange} />

89. 양방향 바인딩 (Two-Way Binding)

• 설명: 사용자의 입력에 따라 상태를 업데이트하고, 그 상태를 다시 입력 필드에 반영하는 방식.

90. 다차원 리스트 렌더링

const rows = [
  [null, null, null],
  [null, null, null],
  [null, null, null]
];

rows.map((row, rowIndex) => (
    <li key={rowIndex}>
        {row.map((col, colIndex) => (
            <li key={colIndex}>
              <button>{playerSymbol}</button>
            </li>
        ))}
    </li>
));

91. key 속성

• 설명: React에서 배열을 렌더링할 때 각 요소를 고유하게 식별하기 위해 사용하는 속성. 중첩 배열에서 rowIndex와 colIndex로 고유한 키를 부여.

92. 틱택토 게임 / Lifting State Up (상태 끌어올리기)

• 설명: 여러 컴포넌트가 동일한 상태를 필요로 할 때, 그 상태를 상위 컴포넌트로 끌어올려 하위 컴포넌트에 상태를 공유하는 방식.

const [activePlayer, setActivePlayer] = useState('X'); // App 컴포넌트에서 상태 관리

1. App 컴포넌트: activePlayer 상태 설정 및 관리
   ↓
2. GameBoard 컴포넌트와 Player 컴포넌트에 activePlayer 상태 전달
   ↓
3. Player 컴포넌트: activePlayer가 'X' 또는 'O'인지에 따라 CSS 클래스 추가 (highlight-player)
   ↓
4. GameBoard 컴포넌트: activePlayer 상태를 받아 버튼 클릭 시 해당 기호(X 또는 O) 표시
   ↓
5. handleSelectSquare 함수 실행: 버튼 클릭 시 게임판 상태와 activePlayer 상태 업데이트
   ↓
6. setActivePlayer 함수: 현재 차례의 플레이어를 번갈아가며 설정
   ↓
7. UI 업데이트: 현재 차례의 플레이어에 강조 표시 및 게임판에 X 또는 O 기호 표시

93. 틱택토 게임 / 계산된 값 사용

1. 상태 끌어올리기: GameBoard는 더 이상 상태를 직접 관리하지 않고, 부모(App) 컴포넌트에서 제어하는 방식으로 변경. 이를 통해 gameTurns와 activePlayer와 같은 상태를 한 곳에서 관리.
2. 게임 진행 순서 관리: 각 턴에 대한 정보를 gameTurns 배열에 객체로 저장하여, 어떤 플레이어가 어디에 수를 두었는지 기록.
3. 불변성 유지: 기존 배열을 변경하지 않고 복사한 후, 새로운 정보를 추가하는 방식으로 상태를 불변하게 관리함.
4. 현재 플레이어 계산: 가장 최신의 차례 정보를 기반으로 다음 플레이어를 결정함.
5. 게임의 로직 통합: gameTurns 상태를 로그와 게임판 모두에서 공유할 수 있도록 상태를 관리하는 구조로 변경.

// 데이터 흐름 도식화:

1. App 컴포넌트에서 gameTurns와 activePlayer 상태 관리
   ↓
2. GameBoard 컴포넌트에서 onSelectSquare 호출
   ↓
3. handleSelectSquare 함수 실행
   ↓
4. 클릭된 버튼의 정보 (rowIndex, colIndex)와 currentPlayer 계산
   ↓
5. gameTurns 배열에 새로운 턴 정보 추가
   ↓
6. 상태 업데이트 후 로그와 게임판에 반영

94. 틱택토 게임 / Props에서 State 파생하기

1. 상태 끌어올리기: App 컴포넌트에서 gameTurns 상태를 관리하고, GameBoard와 Log 컴포넌트에 상태를 전달함.
2. 파생 상태: gameBoard는 gameTurns 상태를 기반으로 계산된 상태이며, 이를 통해 각 플레이어가 선택한 위치에 기호를 표시함.
3. 이벤트 처리: 각 버튼 클릭 시 행(row)과 열(col)에 대한 정보를 추출하여 handleSelectSquare로 전달하고, gameTurns 상태를 업데이트함.
4. 데이터 불변성: 상태 업데이트는 불변성을 유지하며, 기존 gameTurns 배열에 새로운 턴 정보를 추가하는 방식으로 관리.

// 데이터 흐름 도식화:

1. App 컴포넌트에서 gameTurns 상태 관리
   ↓
2. GameBoard 컴포넌트에서 전달받은 gameTurns Prop으로 gameBoard 파생 후 게임보드 렌더
   ↓
3. GameBoard 컴포넌트에 turns 배열과 onSelectSquare 전달
   ↓
4. GameBoard 컴포넌트에서 각 버튼 클릭 시 onSelectSquare 호출
   ↓
5. handleSelectSquare 함수에서 클릭된 버튼의 row, col 정보와 player 정보를 gameTurns에 업데이트
   ↓
6. gameTurns 배열을 기반으로 gameBoard 파생 및 업데이트
   ↓
7. 업데이트된 gameBoard는 화면에 다시 렌더링

95. 틱택토 게임 / 컴포넌트 간의 State(상태) 공유

1. 상태 끌어올리기 (State Lifting)

   • App 컴포넌트:
     • gameTurns라는 상태를 App 컴포넌트에서 관리.
     • 이 상태를 GameBoard와 Log 컴포넌트로 props로 전달하여 각 컴포넌트가 동일한 상태를 기반으로 렌더링되도록 함.

2. 파생 상태 (Derived State)

   • GameBoard 컴포넌트:
     • gameTurns 상태를 기반으로 gameBoard라는 파생 상태를 계산.
     • gameBoard는 각 턴에서 플레이어가 선택한 위치에 기호를 표시하여 보드에 반영.
     • gameBoard는 App 컴포넌트가 관리하는 상태(gameTurns)에 따라 동적으로 업데이트되어 최신 게임 보드를 표시함.

3. 이벤트 처리 (Event Handling)

   • 버튼 클릭 이벤트:
     • GameBoard의 각 버튼에 클릭 이벤트를 설정.
     • 버튼이 클릭되면 행(row)과 열(col)의 인덱스를 추출하여 handleSelectSquare 함수로 전달.
   • handleSelectSquare:
     • 클릭된 버튼의 row, col 정보와 현재 플레이어의 기호를 사용해 새로운 턴 정보를 생성.
     • 생성된 턴 정보를 gameTurns 상태에 추가하여 게임 상태를 업데이트함.

4. 데이터 불변성 (Data Immutability)

   • gameTurns 상태 관리:
     • 상태 업데이트 시 불변성을 유지하기 위해 기존 gameTurns 배열을 직접 수정하지 않고, 새로운 턴 정보를 배열에 추가하여 상태를 업데이트함.
     • 불변성을 유지하면 React가 상태 변경을 감지하기 쉬워져 효율적인 업데이트가 가능.

// 데이터 흐름 요약
데이터 흐름 순서 (텍스트로 요약)

1. App 컴포넌트에서 gameTurns 상태를 관리
    - 상태는 각 컴포넌트 간에 공유될 수 있도록 끌어올려 관리함.

2. GameBoard 컴포넌트는 gameTurns 속성(prop)을 받아, 이를 기반으로 gameBoard 파생 상태를 계산
    - gameBoard에는 각 플레이어의 기호가 나타나며, 이를 통해 게임 보드를 렌더링함.

3. App 컴포넌트는 GameBoard 컴포넌트에 turns 배열과 onSelectSquare 함수를 전달
    - onSelectSquare는 각 버튼 클릭 시 GameBoard에서 호출될 콜백 함수임.

4. GameBoard 컴포넌트에서 각 버튼 클릭 시 onSelectSquare 호출
    - 각 버튼은 클릭 시 row와 col 정보를 handleSelectSquare로 전달함.

5. handleSelectSquare 함수는 클릭된 버튼의 row, col 정보와 플레이어 기호를 gameTurns에 업데이트
    - 업데이트된 gameTurns는 새로운 턴을 반영하여 최신 상태로 유지됨.

6. gameTurns 배열을 기반으로 gameBoard를 업데이트
    - gameBoard는 최신 턴 정보를 반영해 변경됨.

7. 업데이트된 gameBoard는 화면에 렌더링
    - 상태 변화에 따라 보드가 다시 그려지며 UI에 즉시 반영됨.

96. 틱택토 게임 / 버튼 중복 클릭 방지 및 비활성화

• GameBoard 컴포넌트:

  • 버튼: 각 버튼에 disabled 속성을 추가하여 중복 클릭을 방지.

• 비활성화 조건:

  • playerSymbol이 X 또는 O일 경우: 해당 버튼은 이미 선택된 상태이며, disabled를 true로 설정해 비활성화.
  • playerSymbol이 null인 경우: 버튼이 아직 선택되지 않았으므로 disabled를 false로 설정해 활성화.

• 상태에 따른 조건부 렌더링:

  • playerSymbol 값에 따라 버튼의 disabled 속성이 동적으로 설정됨.
  • 조건: playerSymbol이 X나 O가 아니라 null이면 아직 선택되지 않은 상태이므로 버튼이 활성화됨.

• 기능 확인:

  • 설정 후 버튼이 한 번만 클릭되고, 한 번 클릭된 버튼은 비활성화되므로 다시 클릭할 수 없음.
  • 각 버튼이 한 번씩만 선택되도록 제한하여 게임의 규칙성을 유지하고, 로그의 불필요한 증가를 방지함.

// 데이터 흐름 요약 (텍스트로 설명)

1. App 컴포넌트에서 gameTurns와 GameBoard 상태 관리.
   - gameTurns 상태는 각 플레이어의 선택을 기록하며, 버튼 상태를 결정하는 기준이 됨.

2. GameBoard 컴포넌트는 gameTurns와 onSelectSquare 콜백을 props로 받음.
   - gameTurns 속성으로 각 버튼의 playerSymbol 상태를 파생하여 버튼 상태를 결정함.

3. 각 버튼에 조건부 disabled 설정:
   - GameBoard의 각 버튼은 playerSymbol 상태에 따라 disabled 속성을 가짐
   - playerSymbol이 X나 O면 버튼을 비활성화하고, null이면 활성화 상태로 설정됨.

4. 버튼 클릭 시 이벤트 처리:  
   - 클릭된 버튼의 row와 col 정보가 handleSelectSquare 함수로 전달됨.
   - 선택된 정보는 gameTurns 상태에 추가되어 업데이트됨.

5. 업데이트된 상태로 UI 재렌더링:
   - 버튼이 클릭됨에 따라 gameTurns 상태가 변경되고, 이에 따라 버튼 비활성화 상태가 유지됨.
   - 이후 동일 버튼을 클릭해도 게임 진행에 영향을 미치지 않음.

97. 틱택토 게임 / 분리된 파일로 데이터 아웃소싱

틱택토 게임 승리 조건을 확인하는 로직을 구현하는 방법. 가능한 모든 우승 조합을 배열로 정의하고, 매 차례마다 현재 게임 상태와 비교하여 승리 여부를 판단한다. 우승 조건은 행과 열의 인덱스로 표현되며, 별도의 헬퍼 파일(winning-combinations.js)에 저장된다. 이 파일을 메인 앱 컴포넌트(App.jsx)에서 가져와서 사용하며, 승리 시 게임판 위에 승리 화면을 표시한다.

[1] 게임 시작
     |
     v
[2] 플레이어의 턴
     |
     v
[플레이어가 버튼 클릭]
     |
     v
[3] 게임 상태 업데이트]
     |
     v
[4] 우승 조건 확인]
     |
     v
+-----------------------+
| 우승 조건 일치?       |
+-----------------------+
     |             |
    예          아니오
     |             |
     v             v
[5] 게임 종료 처리   +----------------------+
     |             | 무승부인가?            |
     v             +----------------------+
[승리 화면 표시]            |          |
     |                  예          아니오
     v                  |           |
[게임 종료]               v           v
                   [무승부 화면 표시]  [다음 플레이어로 전환]
                        |             |
                        v             v
                   [게임 종료]      [2] 플레이어의 턴으로 이동

98. 틱택토 게임 / 계산된 값 끌어올리기

이번 설명에서는 게임(예: 틱택토)의 우승 조건을 매 차례마다 동적으로 확인하는 로직을 최적화하는 방법을 다룹니다. 기존에는 handleSelectSquare 함수 내에서 hasWinner 상태를 별도로 관리했으나, 이는 중복된 로직으로 인해 불필요하다고 판단됩니다. 대신, gameTurns 상태에서 우승 여부를 파생시켜 관리하는 것이 효율적입니다.

이를 위해 gameBoard 상태를 App 컴포넌트로 끌어올려 상태 관리와 우승 조건 확인 로직을 중앙화합니다. GameBoard 컴포넌트는 이제 board 속성을 받아 게임판을 렌더링하며, 게임판의 기호는 App 컴포넌트에서 관리됩니다. 이러한 구조 변경을 통해 코드의 중복을 제거하고, 상태 관리의 일관성을 유지할 수 있습니다.

또한, WINNING_COMBINATIONS를 매 차례마다 재실행하여 모든 우승 조합을 검토함으로써 우승 여부를 신속하게 판단할 수 있습니다. 게임판의 각 버튼 기호를 gameBoard 상태에서 추출하여 우승 조건을 충족하는지 확인합니다. 이러한 최적화는 코드의 효율성과 가독성을 높이며, 유지보수를 용이하게 합니다.

[게임 시작]
     |
     v
[App 컴포넌트 초기화]
     |
     v
[gameBoard 상태 생성 및 초기화]
     |
     v
[GameBoard 컴포넌트 렌더링]
     |
     v
[플레이어가 버튼 클릭]
     |
     v
[handleSelectSquare 함수 실행]
     |
     v
[gameBoard 업데이트]
     |
     v
[우승 조건 검토]
     |
     v
+-------------------------+
| 우승 조건 충족 여부 확인 |
+-------------------------+
         |           |
        예           아니오
         |              |
         v              v
[게임 종료 처리]     [gameBoard 상태 업데이트]
     |                      |
     v                      v
[승리 화면 표시]          [다음 플레이어 턴]
     |                      |
     v                      v
[게임 종료]               [플레이어의 턴으로 돌아감]

99. 틱택토 게임 / 계산된 값에서 새로운 계산된 값 파생하기

이 설명은 틱택토 게임에서 우승자를 결정하는 로직을 구현하는 과정에 대한 것입니다.

• 우승 조건 검사:

  • 우승 조건 배열(WINNING_COMBINATIONS)을 순회하면서 각 우승 조합을 확인합니다.
  • 각 우승 조합의 버튼 위치를 사용하여 gameBoard에서 해당 기호를 가져옵니다.
  • 첫 번째 버튼의 기호가 null이 아니고, 세 버튼의 기호가 모두 동일하면 우승자가 결정됩니다.

• 우승자 처리 및 메시지 표시:

  • 우승자(winner) 변수를 통해 우승자를 저장하고, 화면에 메시지를 표시합니다.
  • AND 연산자(&&)를 사용하여 우승자가 있을 때만 메시지를 표시합니다.

• 게임 진행 제어 필요성:

  • 우승자가 결정되어도 게임이 멈추지 않는 문제가 있습니다.
  • 게임 종료 시 더 이상 입력을 받지 않도록 로직을 추가해야 합니다.
  • 게임 오버 화면을 개선하여 사용자 경험을 높입니다.

• 다음 단계:

  • 게임 종료 후 입력 차단 기능 구현.
  • 게임 오버 화면 디자인 개선.
  • 게임 재시작 기능 추가.

[게임 시작]
     ↓
[우승 조합 반복문 시작]
     ↓
[첫 번째 버튼 기호 가져오기]
     ↓
[firstSymbol이 null인가?]
     ↙           ↘
   예             아니오
   ↓                ↓
[다음 우승 조합으로]   [두 번째, 세 번째 버튼 기호 가져오기]
                        ↓
          [기호들이 모두 동일한가?]
                        ↙           ↘
                      예             아니오
                      ↓                ↓
          [우승자 결정 및 메시지 표시]   [다음 우승 조합으로]
                      ↓
             [게임 종료 처리 필요]
                      ↓
          [게임 오버 화면 개선 작업]

100. 틱택토 게임 / 틱택토 게임: "게임 오버" 화면 & 무승부 여부 확인

// 게임 진행 및 종료 조건 확인:

[게임 시작]
     ↓
[플레이어의 턴 진행]
     ↓
[gameTurns 업데이트]
     ↓
[우승자 확인 로직]
     ↓
┌───────────────────────┐
│ 우승자가 있는가?      │
└─────────┬─────────────┘
          │
        예 ▼           아니오
    [winner 변수 설정]      │
          │                ↓
          │        [gameTurns.length === 9 인가?]
          │                │
          ▼               예▼           아니오
[GameOver 컴포넌트 렌더링]   [hasDraw = true]   [게임 진행]
          │                │
          ▼                ▼
     [승리자 메시지]     [GameOver 컴포넌트 렌더링]
          │                │
          ▼                ▼
    [Rematch 버튼]       [무승부 메시지]
          │                │
          ▼                ▼
    [게임 재시작 기능]     [Rematch 버튼]

// 컴포넌트 간 데이터 흐름:

[App 컴포넌트]
     │
     │-- (우승자 또는 무승부 확인)
     │
     │
     │
     ▼
[GameOver 컴포넌트]
     │
     │-- (winner 속성 전달)
     │
     ▼
[조건부 렌더링]
     │
┌───────────────┐
│ winner가 있는가? │
└──────┬──────────┘
       │
     예▼           아니오▼
[승리자 메시지]     [무승부 메시지]
       │              │
       ▼              ▼
  [Rematch 버튼]   [Rematch 버튼]

// 사용자 상호작용 및 게임 재시작 (추후 구현):

[사용자가 Rematch 버튼 클릭]
              │
              ▼
      [게임 상태 초기화]
              │
              ▼
         [게임 재시작]

101. 틱택토 게임 / 불변성이 어떤 경우에서든 중요한 이유

이 설명은 React로 만든 게임(틱택토 등)에서 재대결(Rematch) 버튼을 통해 게임을 재시작하는 기능을 구현하는 과정과, 그 과정에서 발생한 버그의 원인과 해결 방법에 대한 것입니다.

• 게임 재시작 기능 구현:

  • App 컴포넌트에서 handleRestart 함수를 생성하여 gameTurns 상태를 빈 배열로 재설정합니다.
  • GameOver 컴포넌트에 onRestart 속성을 전달하고, 내부의 Rematch 버튼에 onClick 핸들러로 연결합니다.

• 버그 발생 및 원인 분석:

  • 게임 재시작 후에도 게임판이 초기화되지 않고, 게임 오버 화면이 사라지지 않는 문제가 발생했습니다.
  • 이는 gameBoard를 생성하는 과정에서 원본 배열(initialGameBoard)이 직접 수정되었기 때문입니다.
  • 자바스크립트에서 배열과 객체는 참조 타입이므로, 복사 없이 직접 수정하면 원본 데이터가 변경됩니다.

• 버그 해결:

  • initialGameBoard의 깊은 복사(deep copy) 를 생성하여 gameBoard를 만들어야 합니다.
  • map 함수와 스프레드 연산자(...)를 사용하여 내부 배열까지 복사합니다.
  • 이를 통해 게임판이 올바르게 초기화되고, 게임이 정상적으로 재시작됩니다.

// 게임 재시작 기능 흐름:

[Rematch 버튼 클릭]
         │
         ▼
[handleRestart 함수 호출]
         │
         ▼
[gameTurns 상태를 빈 배열로 재설정]
         │
         ▼
[App 컴포넌트 재렌더링]
         │
         ▼
[파생 상태들 업데이트]
   ├─ gameBoard 재생성
   ├─ activePlayer 재설정
   └─ winner 상태 초기화
         │
         ▼
[게임판 초기화 및 게임 재시작]

// 버그 발생 및 해결 흐름:

[초기 버그 상황]
         │
[gameBoard 생성 시 initialGameBoard를 직접 수정]
         │
         ▼
[게임 재시작 후에도 initialGameBoard가 수정된 상태]
         │
         ▼
[게임판이 초기화되지 않고 이전 상태 유지]
         │
         ▼
[버그 원인 파악]
   └─ 배열이 참조 타입이므로 원본이 변경됨
         │
         ▼
[해결책 적용]
   └─ initialGameBoard의 깊은 복사본으로 gameBoard 생성
         │
         ▼
[gameBoard가 새로운 배열로 생성됨]
         │
         ▼
[게임 재시작 시 게임판이 올바르게 초기화]

// 컴포넌트 간 데이터 흐름:

[App 컴포넌트]
   │
   ├─ handleRestart 함수 정의
   │
   ├─ GameOver 컴포넌트에 onRestart 속성 전달
   │        │
[GameOver 컴포넌트]
   │
   ├─ Rematch 버튼에 onClick 핸들러로 onRestart 설정
   │        │
[사용자 인터랙션]
   │
   └─ Rematch 버튼 클릭 시 onRestart 호출
             │
             ▼
[App 컴포넌트의 handleRestart 실행]

// 게임 재시작 기능 흐름도

[사용자]
  │
  ├─── 클릭 ───▶ [Rematch 버튼]
                       │
                       ▼
              [onRestart 호출]
                       │
                       ▼
             [handleRestart 실행]
                       │
                       ▼
          [gameTurns 상태 초기화]
                       │
                       ▼
             [게임 상태 재설정]
                       │
                       ▼
              [게임판 재렌더링]

// 버그 발생 및 해결 흐름도

[게임판 생성 시]
    │
    ├─ (잘못된 방법) initialGameBoard 직접 수정
    │                    │
    │                    ▼
    │          [원본 배열이 수정됨]
    │                    │
    │                    ▼
    │          [게임 재시작 시 문제 발생]
    │
    └─ (올바른 방법) initialGameBoard 깊은 복사
                         │
                         ▼
               [새로운 gameBoard 생성]
                         │
                         ▼
               [게임 재시작 시 정상 동작]

102. 틱택토 게임 / State(상태)를 끌어올리면 안 되는 경우

게임에서 승자가 나왔을 때 기호('X', 'O') 대신 플레이어의 이름을 표시하기 위해, 플레이어 이름을 App 컴포넌트에서 접근할 수 있도록 해야 합니다. 하지만 Player 컴포넌트의 상태를 끌어올리면 매 타이핑마다 App 컴포넌트 전체가 재렌더링되어 비효율적입니다. 또한 Player 컴포넌트는 두 번 사용되므로 상태 관리가 복잡해집니다.

이를 해결하기 위해 App 컴포넌트에 새로운 상태 players를 추가하고, 플레이어 이름을 저장합니다. Player 컴포넌트에서 저장 버튼을 클릭할 때만 handlePlayerNameChange 함수를 호출하여 players 상태를 업데이트합니다. 이때 이전 상태를 보존하면서 변경된 플레이어의 이름만 업데이트합니다.

동적 속성 설정을 사용하여 객체의 키를 기호(symbol)로 지정하고, 해당 플레이어의 이름을 업데이트합니다. 게임 종료 시 승자의 기호를 사용하여 players 상태에서 승자 이름을 가져와 화면에 표시합니다.

[Player 컴포넌트 1]       [Player 컴포넌트 2]
      │                          │
(로컬 상태로 이름 관리)     (로컬 상태로 이름 관리)
      │                          │
      ├─── 저장 버튼 클릭 ───▶   │
      │     onSave('X', newName)  │
      │                          ├─── 저장 버튼 클릭 ───▶
      │                          │     onSave('O', newName)
      │                          │
───────────────────────────────────────────────
                      │
          [App 컴포넌트: handlePlayerNameChange 호출]
                      │
          setPlayers(prevPlayers => ({
              ...prevPlayers,
              [symbol]: newName,
          }))
                      │
          [players 상태 업데이트: { X: 이름1, O: 이름2 }]
                      │
          게임 진행...
                      │
          게임 종료 시 승자 결정(winnerSymbol)
                      │
          const winnerName = players[winnerSymbol]
                      │
          <GameOver winner={winnerName} />
                      │
          [GameOver 컴포넌트: 승자 이름 표시]

• 상태 업데이트 시 이전 상태 보존:

  • 상태 업데이트 함수에서 이전 상태(prevPlayers)를 복사하여 다른 플레이어의 이름이 유지되도록 합니다.
  • React에서 상태를 업데이트할 때 불변성을 유지하는 것이 중요합니다.

• 컴포넌트 간 데이터 전달:

  • App 컴포넌트에서 Player 컴포넌트로 onSave 함수를 속성으로 전달합니다.
  • Player 컴포넌트에서 이름이 변경되면 onSave를 호출하여 App 컴포넌트에 알립니다.

• 렌더링 최적화:

  • 플레이어 이름 입력 시 App 컴포넌트가 재렌더링되지 않으므로 성능 향상에 도움이 됩니다.
  • 상태 끌어올리기 대신 필요한 데이터만 상위 컴포넌트에서 관리합니다.

103. 틱택토 게임 / State(상태) 끌어올리기 대안

• 목표: 게임에서 승자가 나왔을 때 플레이어의 기호('X', 'O') 대신 해당 플레이어의 이름을 화면에 표시하고, 이름 변경 시 승자 이름도 업데이트되도록 구현.

• 플레이어 이름 업데이트:

  • Player 컴포넌트에서 이름 변경 후 저장 버튼을 클릭하면 onChangeName 함수를 호출하여 App 컴포넌트의 players 상태를 업데이트.
  • onChangeName는 symbol과 playerName을 인자로 받아, 해당 플레이어의 이름을 업데이트.

• App 컴포넌트에서 승자 이름 표시:

  • 우승자 결정 로직에서 승자의 기호 대신 players 상태에서 해당 기호의 이름을 가져와 winner 변수에 저장.
  • GameOver 컴포넌트에 winner 속성으로 전달하여 승자 이름을 표시.

• 동적 속성 접근 활용:

  • 자바스크립트의 computed property names를 사용하여 객체의 속성을 동적으로 접근 및 업데이트.
  • 이를 통해 코드를 더욱 유연하고 재사용 가능하게 유지.

• 결과:

  • 게임에서 플레이어의 이름을 변경하고 승리하면, 변경된 이름으로 승자 메시지가 표시됨.
  • 게임의 모든 필수 기능이 완성되어 플레이 가능한 상태가 됨.

[Player 컴포넌트]
   │
   ├─── (사용자 입력: 플레이어 이름 변경)
   │         │
   │   [playerName 상태 업데이트]
   │
(저장 버튼 클릭)
   │
   └───▶ [handleEdit 함수 호출]
             │
             ├── isEditing이 true인가?
             │         │
             │        예▼
             │
             ├── [onChangeName(symbol, playerName) 호출]
             │
             └── isEditing 상태 토글 (편집 모드 종료)
             
────────────────────────────────────────

[App 컴포넌트]
   │
(온초점) ────────▶ [handlePlayerNameChange 함수 호출]
                     │
                     ├── `players` 상태 업데이트
                     │      (이전 상태 보존, 변경된 이름만 업데이트)
                     │
                     └── [players 상태 변경]
                     
────────────────────────────────────────

(게임 진행 중)
   │
[우승자 결정 로직]
   │
   ├── 우승자의 기호: firstSquareSymbol ('X' 또는 'O')
   │
   └───▶ [winner = players[firstSquareSymbol]]
              │
              └── 승자 이름을 players 상태에서 가져옴
              
────────────────────────────────────────

[GameOver 컴포넌트]
   │
(승자 이름 표시)
   │
   └── `<p>{winner} won!</p>` 렌더링

104. 틱택토 게임 / 마무리 다듬기 및 컴포넌트 개선

이 설명은 React로 개발한 게임(틱택토 등)의 App 컴포넌트를 리팩토링하여 코드의 가독성과 유지보수성을 향상시키는 과정에 대한 것입니다.

• App 컴포넌트의 복잡한 로직을 함수로 분리:

  • 우승자를 결정하는 로직을 deriveWinner 함수로 분리하여 App 컴포넌트를 간결하게 만듭니다.
  • 게임판을 생성하는 로직을 deriveGameBoard 함수로 분리합니다.

• 상수의 관리 및 명명 규칙 일관성 유지:

  • PLAYERS와 INITIAL_GAME_BOARD와 같은 상수를 컴포넌트 외부로 이동하고, 대문자와 언더스코어를 사용하는 UPPER_SNAKE_CASE 명명법을 적용합니다.

• 코드의 가독성과 유지보수성 향상:

  • 주요 로직이 함수로 분리되어 App 컴포넌트가 더 읽기 쉽고 이해하기 쉬워집니다.
  • 주석과 불필요한 코드를 제거하여 코드가 더 깔끔해집니다.

• 결과 확인:

  • 리팩토링 후에도 애플리케이션이 정상적으로 작동함을 확인합니다.
  • 리팩토링 과정을 통해 React 컴포넌트와 상태 관리에 대한 추가적인 경험과 학습을 쌓았습니다.

// App 컴포넌트 구조 개선 흐름:

[App 컴포넌트]
      │
      ├─ 상태 및 변수 선언
      │    ├─ gameTurns
      │    ├─ players
      │    └─ 기타 상태들
      │
      ├─ 파생 상태 계산
      │    ├─ gameBoard = deriveGameBoard(gameTurns)
      │    └─ winner = deriveWinner(gameBoard, players)
      │
      ├─ UI 렌더링
      │    ├─ GameBoard 컴포넌트
      │    ├─ Player 컴포넌트
      │    └─ GameOver 컴포넌트 (필요 시)
      │
      └─ 이벤트 핸들러
           ├─ handleSelectSquare
           ├─ handleRestart
           └─ handlePlayerNameChange

// 함수 분리 및 호출 흐름:

[App 컴포넌트]                         [외부 함수]
      │                                     │
      ├─ gameBoard = deriveGameBoard(gameTurns) ───▶ [deriveGameBoard 함수]
      │                                     │
      └─ winner = deriveWinner(gameBoard, players) ─▶ [deriveWinner 함수]

// 상수 관리 흐름:

[상수 선언]
  ├─ INITIAL_GAME_BOARD
  └─ PLAYERS

[App 컴포넌트]
  ├─ 초기 상태로 상수 사용
  │    ├─ gameTurns 초기화
  │    └─ players 초기화
  │
  └─ 파생 상태 계산 및 로직에서 상수 사용

// 전체 데이터 흐름 요약:

[사용자 인터랙션]
      │
      ├─ 게임 시작
      │
      ├─ 플레이어가 버튼 클릭
      │    │
      │    └─ handleSelectSquare 호출
      │          │
      │          └─ gameTurns 업데이트
      │
      ├─ App 컴포넌트 재렌더링
      │    │
      │    ├─ gameBoard 재계산 (deriveGameBoard)
      │    │
      │    └─ winner 재계산 (deriveWinner)
      │
      ├─ 우승자 결정 시
      │    │
      │    └─ GameOver 컴포넌트 표시
      │
      └─ Rematch 버튼 클릭 시
           │
           └─ handleRestart 호출
                 │
                 └─ gameTurns 초기화

105. 투자 계산기 앱 / Header(헤더) 컴포넌트 추가하기

// 프로젝트 구조 설정

src 폴더
  │
  ├── components 폴더
  │     │
  │     └── Header.jsx
  │
  └── App.jsx

// Header 컴포넌트 생성 및 내보내기

[Header.jsx]
  │
  ├── Header 컴포넌트 함수 정의
  │     │
  │     └── JSX 반환
  │            ├── <header>
  │            │     ├── <img>
  │            │     └── <h1>
  │            └── </header>
  │
  └── export default Header

// App 컴포넌트에서 Header 컴포넌트 사용

[App.jsx]
  │
  ├── Header 컴포넌트 임포트
  │     │
  │     └── import Header from './components/Header';
  │
  └── App 컴포넌트 함수 정의
        │
        └── JSX 반환
              │
              ├── <div>
              │     ├── <Header />
              │     └── {/* 기타 컴포넌트 */}
              └── </div>

106. 투자 계산기 앱 / User Input(사용자 입력) 컴포넌트로 시작하기

• 목적: 투자 계산기 앱에서 사용자 입력을 처리하기 위한 UserInput 컴포넌트를 추가하여, 초기 투자 금액, 연간 투자액, 예상 수익률, 투자 기간과 같은 필요한 입력 값을 수집하고, 이를 통해 투자 결과 데이터를 계산하고자 합니다.
• 구현 내용:
  • 새로운 UserInput 컴포넌트를 생성하고, section 요소를 반환하며 id="user-input"을 부여하여 CSS 스타일링과 연동합니다.
  • 입력 필드들은 div와 className="input-group"을 사용하여 구성하고, 각 입력 필드는 p 태그 안에 label과 input 요소로 구성됩니다.
  • 모든 input 요소는 type="number"로 설정하고, required 속성을 추가하여 필수 입력 값으로 지정합니다.
• 추가 작업:
  • 사용자 입력 값을 상태로 관리하기 위한 로직을 추가하여, 입력 값 변경 시 상태를 업데이트하고 입력 필드에 값을 반영하는 양방향 바인딩을 구현해야 합니다.
  • 이를 통해 입력된 값을 기반으로 투자 결과를 계산하고, 결과를 화면에 표시할 수 있습니다.

[UserInput 컴포넌트 생성]
        │
        ▼
[<section id="user-input"> 반환]
        │
        ▼
[<div className="input-group"> 생성]
        │
        ▼
┌──────────────────────────────────────────┐
│                                          │
▼                                          ▼
[p]                                        [p]
│                                          │
<label htmlFor="initial-investment">       <label htmlFor="annual-investment">
  Initial Investment ($)                     Annual Investment ($)
</label>                                   </label>
<input                                      <input
  type="number"                               type="number"
  id="initial-investment"                     id="annual-investment"
  required                                    required
  value={initialInvestment}                   value={annualInvestment}
  onChange={...}                              onChange={...}
/>                                         />
│                                          │
└──────────────────────────────────────────┘
        │
        ▼
(동일한 방식으로 Expected Return과 Duration 입력 필드 추가)
        │
        ▼
[각 입력 값에 대한 상태 관리]
        │
        ▼
[양방향 바인딩 구현]
        │
        ▼
[입력 값 변경 시 상태 업데이트]
        │
        ▼
[상태 변경 시 입력 필드에 값 반영]
        │
        ▼
[수집된 입력 값을 사용하여 투자 결과 계산]

107. 투자 계산기 앱 / 이벤트 핸들링 & 양방향 바인딩 활용

• 상태 관리 및 양방향 바인딩 구현:

  • UserInput 컴포넌트에서 useState 훅을 사용하여 사용자 입력 값을 관리합니다.
  • 네 가지 입력 필드를 하나의 상태 객체 (userInput)로 관리하며, 초기 값을 설정합니다.
  • handleChange 함수를 정의하여 입력 값 변경 시 상태를 업데이트합니다.
  • 상태 업데이트 시 이전 상태를 복사하고, 변경된 속성만 덮어씁니다.
  • input 요소의 value 속성을 상태 값으로 설정하고, onChange 이벤트 핸들러에서 handleChange 함수를 호출하여 양방향 바인딩을 구현합니다.

• 이벤트 핸들러에 익명 함수 사용:

  • onChange 이벤트 핸들러에 익명 함수를 사용하여 handleChange에 필요한 인자를 전달합니다.
  • 이벤트 객체에서 event.target.value를 가져와 newValue로 사용합니다.

• App 컴포넌트에서 UserInput 컴포넌트 사용:

  • UserInput 컴포넌트를 import하고, Header 아래에 렌더링합니다.
  • JSX에서 여러 형제 요소를 반환할 때 하나의 루트 요소로 감싸기 위해 React Fragment를 사용합니다.

• 결과 데이터 계산 및 출력 준비:

  • 사용자 입력 값을 관리할 수 있게 되었으므로, 이제 입력된 값을 기반으로 결과 데이터를 계산하고, 이를 화면에 출력할 수 있습니다.

// UserInput 컴포넌트 내부 흐름

[UserInput 컴포넌트]
       │
       ├─ 상태 선언 및 초기화
       │    └─ useState로 userInput 상태 생성
       │         {
       │           initialInvestment: 10000,
       │           annualInvestment: 1200,
       │           expectedReturn: 6,
       │           duration: 10,
       │         }
       │
       ├─ handleChange 함수 정의
       │    └─ (inputIdentifier, newValue) 받아 상태 업데이트
       │         ├─ 이전 상태 복사 (...prevInput)
       │         └─ 변경된 속성만 덮어쓰기 ([inputIdentifier]: newValue)
       │
       ├─ 각 input 필드에 양방향 바인딩 구현
       │    ├─ value 속성에 userInput의 해당 속성 설정
       │    ├─ onChange 이벤트 핸들러에 익명 함수 사용
       │         └─ handleChange 호출
       │              ├─ 첫 번째 인자: 해당 속성의 이름 (문자열)
       │              └─ 두 번째 인자: event.target.value
       │
       └─ 사용자 입력 값 변경 시
            └─ handleChange 함수 호출로 상태 업데이트

// App 컴포넌트에서 UserInput 컴포넌트 사용

[App 컴포넌트]
       │
       ├─ `UserInput` 컴포넌트 import
       │
       ├─ JSX에서 Header와 UserInput을 렌더링
       │    └─ 하나의 루트 요소로 감싸기 (React Fragment)
       │
       └─ App 컴포넌트 렌더링 시
            └─ Header와 UserInput이 화면에 표시됨

// 전체 애플리케이션 흐름

[애플리케이션 시작]
       │
       ├─ App 컴포넌트 렌더링
       │    ├─ Header 컴포넌트 렌더링
       │    └─ UserInput 컴포넌트 렌더링
       │
       ├─ UserInput 컴포넌트에서 초기 상태 설정
       │
       ├─ 사용자 입력 값 변경
       │    └─ handleChange 함수 호출로 상태 업데이트
       │         └─ userInput 상태 변경
       │
       ├─ 상태 변경 시 입력 필드에 값 반영 (양방향 바인딩)
       │
       └─ 결과 데이터 계산 및 출력 예정
            ├─ 수집된 입력 값을 기반으로 계산
            └─ 계산 결과를 테이블 등에 출력

// 시각적 흐름도:

[사용자]
   │
   └─ 입력 필드 값 변경 (e.g., initialInvestment)
        │
        ▼
[onChange 이벤트 발생]
        │
        ▼
[익명 함수 호출]
        │
        ├─ inputIdentifier: 'initialInvestment'
        └─ newValue: event.target.value
        │
        ▼
[handleChange 함수 호출]
        │
        └─ setUserInput 상태 업데이트
              ├─ 이전 상태 복사 (...prevInput)
              └─ 변경된 속성만 업데이트 ([inputIdentifier]: newValue)
        │
        ▼
[userInput 상태 변경]
        │
        ▼
[컴포넌트 재렌더링]
        │
        └─ 입력 필드의 value 속성에 새로운 상태 값 반영

108. 투자 계산기 앱 / State(상태) 끌어올리기

• 상태 끌어올리기 (Lifting State Up): UserInput 컴포넌트에서 관리하던 userInput 상태와 handleChange 함수를 App 컴포넌트로 이동하여 상태를 상위 컴포넌트에서 관리합니다. 이를 통해 여러 하위 컴포넌트에서 동일한 상태를 공유하고 사용할 수 있습니다.
• Props로 상태와 함수 전달: App 컴포넌트에서 UserInput 컴포넌트에 userInput과 handleChange 함수를 props로 전달하여, UserInput 컴포넌트는 입력 필드의 값과 이벤트 처리를 상위 컴포넌트의 상태와 연동합니다.
• Results 컴포넌트 생성 및 데이터 전달: 새로운 Results 컴포넌트를 생성하고, userInput 상태를 props로 전달합니다. Results 컴포넌트는 전달받은 입력 값을 사용하여 결과를 계산하고 화면에 출력합니다.
• 데이터 흐름 통합 및 공유: 상태와 데이터를 상위 컴포넌트에서 관리하고 하위 컴포넌트로 전달함으로써, 애플리케이션의 데이터 흐름을 통합하고 컴포넌트 간에 데이터를 공유할 수 있습니다.
• 함수형 프로그래밍 및 불변성 유지: 상태 업데이트 시 이전 상태를 복사하고 변경된 부분만 업데이트하여 불변성을 유지합니다. 이는 React에서 상태 관리를 할 때 중요한 패턴입니다.

// 상태 끌어올리기 및 상태 관리 흐름

[App 컴포넌트]
    │
    ├─ userInput 상태 정의
    │
    ├─ handleChange 함수 정의
    │
    ├─ UserInput 컴포넌트에 props로 전달
    │    ├─ userInput
    │    └─ onChange (handleChange 함수)
    │
    ├─ Results 컴포넌트에 props로 전달
    │    └─ input (userInput 상태)
    │
    └─ App 컴포넌트가 상태의 중앙 관리자가 됨

// UserInput 컴포넌트의 데이터 흐름

[UserInput 컴포넌트]
    │
    ├─ props 수신
    │    ├─ userInput
    │    └─ onChange
    │
    ├─ 입력 필드에 value와 onChange 설정
    │    ├─ value={userInput.initialInvestment}
    │    └─ onChange 이벤트 발생 시
    │         └─ onChange('initialInvestment', event.target.value) 호출
    │
    └─ 입력 값 변경 시 상위 컴포넌트의 상태 업데이트

// Results 컴포넌트의 데이터 흐름

[Results 컴포넌트]
    │
    ├─ props 수신
    │    └─ input (userInput 상태)
    │
    ├─ calculateInvestmentResults 함수 호출
    │    └─ input 값을 사용하여 결과 계산
    │
    ├─ 계산된 결과를 테이블로 출력
    │
    └─ 결과가 변경될 때마다 업데이트된 결과 표시

// 전체 애플리케이션 데이터 흐름

[사용자 입력]
    │
    └─ UserInput 컴포넌트에서 입력 값 변경
          │
          └─ onChange 호출로 App 컴포넌트의 userInput 상태 업데이트
                │
                └─ 상태 변경으로 App, UserInput, Results 컴포넌트 재렌더링
                      │
                      ├─ UserInput: 최신 userInput 값으로 입력 필드 업데이트
                      │
                      └─ Results: 새로운 input 값으로 결과 재계산 및 표시

// 시각적 흐름도

[사용자]
   │
   └─ 입력 필드 값 변경
        │
        ▼
[UserInput 컴포넌트]
   │
   └─ onChange 이벤트 발생
        │
        ▼
   props.onChange('initialInvestment', newValue)
        │
        ▼
[App 컴포넌트]
   │
   └─ handleChange 함수 실행
        │
        ▼
   userInput 상태 업데이트
        │
        ├─ 새로운 userInput 상태
        ▼
[컴포넌트 재렌더링]
   │
   ├─ UserInput 컴포넌트
   │    └─ props.userInput의 최신 값으로 입력 필드 업데이트
   │
   └─ Results 컴포넌트
        └─ props.input의 최신 값으로 결과 재계산 및 표시

109. 투자 계산기 앱 / 값 계산하기 및 숫자 값 올바르게 다루는 방법

• 투자 결과 계산:

  • Results 컴포넌트에서 calculateInvestmentResults 함수를 사용하여 투자 결과를 계산합니다.
  • input 속성으로 전달된 userInput 상태를 함수에 전달합니다.

• 결과 데이터 확인:

  • 계산된 결과는 배열 형태로, 각 요소는 연도별 투자 정보를 담고 있습니다.
  • 개발자 도구에서 console.log를 통해 결과를 확인할 수 있습니다.

• 에러 발생 및 원인 분석:

  • 결과 값에 NaN 또는 이상한 값이 나타나는 문제가 발생합니다.
  • 원인은 input 필드의 값이 문자열로 저장되어 숫자 연산 시 문제가 발생하기 때문입니다.
  • 자바스크립트에서는 input 요소의 값이 항상 문자열입니다.

• 버그 수정:

  • input 값들을 숫자로 변환하여 문제를 해결합니다.
  • handleChange 함수에서 newValue 앞에 +를 추가하여 문자열을 숫자로 변환합니다.

• 수정 후 결과 확인:

  • 버그가 사라지고 올바른 결과를 얻을 수 있습니다.

• 다음 단계:

  • 계산된 결과를 테이블 형태로 화면에 출력합니다.

// Results 컴포넌트에서 결과 계산 및 출력 준비:

[Results 컴포넌트]
     │
     ├─ input 속성 수신 (userInput 상태)
     │
     ├─ calculateInvestmentResults 함수 import
     │
     ├─ 결과 계산:
     │     resultsData = calculateInvestmentResults(input)
     │
     ├─ 결과 확인:
     │     console.log(resultsData)
     │
     ├─ 개발자 도구에서 resultsData 확인
     │
     └─ 다음 단계로 결과를 테이블에 출력

// 버그 발생 및 수정 과정:

[문제 발생]
     │
     ├─ 결과 값에 이상한 값, NaN 발생
     │
     ├─ 원인 분석:
     │     - input 필드의 값이 문자열
     │     - 문자열과 숫자의 연산으로 문제 발생
     │
     └─ 버그 수정:
           - 입력 값을 숫자로 변환
           - handleChange 함수에서 +newValue 사용

// 버그 수정 후 흐름:

[버그 수정 후]
     │
     ├─ App 컴포넌트의 handleChange 함수 수정
     │
     ├─ 입력 값이 숫자로 저장됨
     │
     ├─ calculateInvestmentResults 함수에서 올바른 계산 수행
     │
     └─ 결과 값이 정상적으로 표시됨

// 전체 데이터 흐름:
[사용자 입력]
     │
     └─ UserInput 컴포넌트에서 입력 값 변경
           │
           └─ onChange 이벤트 발생
                 │
                 └─ App 컴포넌트의 handleChange 함수 호출
                       │
                       └─ userInput 상태 업데이트 (+newValue로 숫자 변환)
                             │
                             └─ Results 컴포넌트에 새로운 input 속성 전달
                                   │
                                   └─ calculateInvestmentResults 함수로 결과 계산
                                         │
                                         └─ 결과 값 업데이트 및 화면에 표시

110. 투자 계산기 앱 / 리스트에 결과 출력하기 및 더 많은 값 파생하기

// Results 컴포넌트 데이터 흐름:

[Results 컴포넌트]
      │
      ├─ props로 input 수신 (userInput 상태)
      │
      ├─ calculateInvestmentResults 함수 호출하여 resultsData 계산
      │
      ├─ initialInvestment 계산
      │
      ├─ resultsData.map()을 사용하여 각 연도별 데이터 처리
      │    ├─ totalInterest 계산
      │    ├─ investedCapital 계산
      │    ├─ 각 값을 formatter.format()으로 포맷팅
      │
      └─ 테이블 생성 및 데이터 출력

<!-- 테이블 구조: -->
<table id="result">
  <thead>
  <tr>
    <th>Year</th>
    <th>Total Savings</th>
    <th>Interest (Year)</th>
    <th>Total Interest</th>
    <th>Invested Capital</th>
  </tr>
  </thead>
  <tbody>
  <!-- resultsData.map()을 통해 동적으로 생성된 행들 -->
  <tr key={yearData.year}>
    <td>{yearData.year}</td>
    <td>{formatter.format(yearData.valueEndOfYear)}</td>
    <td>{formatter.format(yearData.yearlyInterest)}</td>
    <td>{formatter.format(totalInterest)}</td>
    <td>{formatter.format(investedCapital)}</td>
  </tr>
  <!-- ... 반복 ... -->
  </tbody>
</table>

// 계산 로직 흐름:

[initialInvestment 계산]
  initialInvestment =
    resultsData[0].valueEndOfYear -
    resultsData[0].yearlyInterest -
    resultsData[0].yearlyContribution;

[각 연도별 totalInterest 계산]
  totalInterest =
    yearData.valueEndOfYear -
    initialInvestment -
    yearData.yearlyContribution * yearData.year;

[각 연도별 investedCapital 계산]
  investedCapital =
    initialInvestment + yearData.yearlyContribution * yearData.year;

// 전체 앱 데이터 흐름:

[사용자 입력] → [App 컴포넌트] → [Results 컴포넌트]
      │                 │                │
      └─ userInput 변경 ─┘                │
                                       │
                             [calculateInvestmentResults 함수 호출]
                                       │
                                [resultsData 생성]
                                       │
                             [Results 컴포넌트에서 테이블 출력]

111. 투자 계산기 앱 / 조건적 콘텐츠 출력

• 문제점: 투자 계산기 앱에서 duration 입력 값이 0이거나 음수일 경우 앱이 충돌하는 문제가 발생합니다.
• 해결 방법: App 컴포넌트에서 입력 값의 유효성을 검사하여, duration이 1 이상인 경우에만 결과를 렌더링하도록 합니다.
• 구현 내용:
  • inputIsValid 상수를 추가하여 userInput.duration >= 1 조건을 확인합니다.
  • inputIsValid를 사용하여 결과 컴포넌트를 조건부로 렌더링하고, 유효하지 않은 경우 에러 메시지를 표시합니다.
  • 에러 메시지에 className="center"를 적용하여 스타일을 개선합니다.
• 결과: 유효하지 않은 입력이 있을 경우 에러 메시지가 표시되고, 사용자가 입력을 수정하면 결과 테이블이 동적으로 업데이트됩니다.
• 완성: 이러한 변경으로 앱이 완성되었으며, 주요 문제점을 해결하였습니다.

// 입력 값 변경 시 데이터 흐름

[사용자 입력 변경]
       │
       └─ UserInput 컴포넌트에서 입력 값 변경
             │
             └─ App 컴포넌트의 userInput 상태 업데이트
                   │
                   ├─ inputIsValid 재계산
                   │     └─ inputIsValid = userInput.duration >= 1
                   │
                   └─ 컴포넌트 재렌더링
                         │
                         ├─ inputIsValid가 true인 경우:
                         │     └─ Results 컴포넌트 렌더링
                         │
                         └─ inputIsValid가 false인 경우:
                               └─ 에러 메시지 표시

// 전체 앱의 데이터 흐름

[App 컴포넌트]
       │
       ├─ userInput 상태 관리
       ├─ inputIsValid 계산
       │
       ├─ UserInput 컴포넌트에 props로 userInput 전달
       ├─ Results 컴포넌트에 조건부로 input 전달
       │
       └─ 렌더링 내용 결정:
             ├─ inputIsValid가 true인 경우:
             │     └─ <Results input={userInput} />
             └─ inputIsValid가 false인 경우:
                   └─ <p className="center">Please enter a duration greater than 0.</p>

112. 리액트 앱 디버깅하기 / 리액트의 Strict Mode(엄격모드) 이해하기

Strict Mode를 활성화하려면 index.js 또는 index.jsx 파일에서 React.StrictMode로 최상위 컴포넌트를 감싸면 됩니다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Strict Mode는 개발 단계에서 여러 가지 검사를 수행하여 잠재적인 문제를 찾아냅니다. 그중 하나는 컴포넌트 함수를 두 번씩 실행하는 것입니다. 이렇게 하면 부작용이 있는 코드나 잘못된 상태 관리로 인해 발생하는 문제를 쉽게 감지할 수 있습니다.

• 문제의 원인

  • Results 컴포넌트에서 results 배열을 컴포넌트 함수 밖에 선언하면, 이 배열은 애플리케이션이 실행되는 동안 한 번만 생성됩니다. 따라서 컴포넌트가 다시 렌더링될 때마다 results 배열은 초기화되지 않고 이전 데이터에 새로운 데이터가 추가됩니다. 그 결과:
  • 테이블이 입력 값을 변경할 때마다 계속 길어집니다.
  • 동일한 키를 가진 요소들이 생겨 "키 중복" 오류 메시지가 발생합니다.

• 문제 해결 방법

  • 이 문제를 해결하려면 results 배열을 컴포넌트 함수 내부로 이동하여, 컴포넌트가 렌더링될 때마다 배열이 새로 생성되도록 해야 합니다.

// Results.jsx
import { calculateInvestmentResults } from '../util/investment';

function Results({ input }) {
  // results 배열을 함수 내부에서 선언
  const results = calculateInvestmentResults(input);

  return (
    <table id="result">
      {/* 테이블 헤더 및 바디 */}
    </table>
  );
}

export default Results;

이렇게 하면 입력 값을 변경할 때마다 results 배열이 초기화되고, 새로운 데이터로 테이블이 갱신됩니다. Strict Mode를 활성화한 상태에서 앱을 새로 고침하면 오류가 사라지고, 콘솔에도 에러 메시지가 나타나지 않습니다.

113. 리액트 앱 디버깅하기 / 리액트 DevTools 사용하기

• React Developer Tools 설치
• Components 탭 활용
  1. 컴포넌트 트리 확인:
     • Components 탭에서는 애플리케이션의 컴포넌트 구조를 트리 형태로 시각화하여 보여줍니다.
     • 각 컴포넌트의 계층 관계를 한눈에 파악할 수 있습니다.
  2. 컴포넌트 선택 및 UI 매핑:
     • 컴포넌트를 클릭하거나 마우스를 올리면, 브라우저 화면에서 해당 컴포넌트가 강조 표시됩니다.
     • 이를 통해 UI의 특정 부분이 어떤 컴포넌트에 의해 렌더링되고 있는지 쉽게 확인할 수 있습니다.
  3. Props와 State 확인:
     • 우측 패널에서 선택한 컴포넌트의 Props(속성)와 State(상태)를 확인할 수 있습니다.
     • Props와 State의 현재 값과 타입을 볼 수 있으며, 이는 디버깅에 매우 유용합니다.
  4. Props와 State 수정:
     • Props는 읽기 전용이지만, State의 경우 직접 값을 수정하여 변경 사항이 UI에 어떻게 반영되는지 실시간으로 확인할 수 있습니다.
     • 예를 들어, duration 값을 10에서 12로 변경하면 UI도 즉시 업데이트됩니다.
  5. Hooks 확인:
     • 컴포넌트가 Hooks를 사용하고 있다면, 해당 Hooks의 상태와 값들을 확인할 수 있습니다.
     • 이를 통해 함수형 컴포넌트의 내부 상태를 더욱 쉽게 파악할 수 있습니다.
• Profiler 탭 활용
  • Profiler 탭은 애플리케이션의 성능을 분석하는 데 사용됩니다.
  • 컴포넌트의 렌더링 시간, 업데이트 빈도 등을 확인하여 성능 최적화에 도움을 줍니다.
  • 이 기능은 성능 문제를 찾고 개선할 때 매우 유용하며, 추후에 자세히 살펴볼 수 있습니다.

114. refs, portals / 복습: State(상태)를 사용한 사용자 입력 관리 (양방향 바인딩)

• 목표: Player 컴포넌트에서 사용자가 입력한 이름을 설정하여 'unknown entity'를 대체하고, 'Welcome [이름]' 형식으로 출력하고자 합니다.
• 구현 방법:
  • useState 훅을 사용하여 입력된 이름(enteredPlayerName)과 제출 여부(submitted)를 상태로 관리합니다.
  • handleChange 함수를 통해 입력 필드의 값을 상태에 저장하고, 입력 시 submitted 상태를 false로 재설정합니다.
  • handleClick 함수를 통해 버튼 클릭 시 submitted 상태를 true로 설정합니다.
  • submitted 상태에 따라 조건부 렌더링을 통해 입력된 이름 또는 'unknown entity'를 출력합니다.
• 문제점:
  • 입력할 때마다 'unknown entity'로 바로 변경되는 것은 사용자 경험 측면에서 바람직하지 않습니다.
  • 상태 관리와 조건부 렌더링으로 인해 코드가 복잡해집니다.
  • 버튼 클릭 시 입력된 값을 읽어들이는 간단한 작업에 비해 코드의 양이 많습니다.
• 개선점:
  • ref를 사용하여 입력 필드의 값을 직접 참조함으로써 코드를 간소화할 수 있습니다.
  • 불필요한 상태 관리와 조건부 렌더링을 줄일 수 있습니다.

// 데이터 흐름 도식화:

[사용자 입력]
    │
    ▼
[입력 필드 onChange 이벤트 발생]
    │
    └─ handleChange 함수 호출
         ├─ setEnteredPlayerName(event.target.value)
         └─ setSubmitted(false)
    │
    ▼
[enteredPlayerName 상태 업데이트]
    │
    ▼
[input 요소의 value 속성에 enteredPlayerName 반영]
    │
    ▼
(사용자가 입력한 내용이 입력 필드에 표시됨)

────────────────────────────────────

[사용자가 버튼 클릭]
    │
    ▼
[버튼 onClick 이벤트 발생]
    │
    └─ handleClick 함수 호출
         └─ setSubmitted(true)
    │
    ▼
[submitted 상태가 true로 업데이트]

────────────────────────────────────

[화면 렌더링]
    │
    ▼
[조건부 렌더링]
    │
    ├─ submitted가 true인 경우:
    │     └─ 'Welcome [enteredPlayerName]' 출력
    │
    └─ submitted가 false인 경우:
          └─ 'Welcome unknown entity' 출력

115. refs, portals / 복습: Fragments (프래그먼트)

• JSX의 중요한 규칙: JSX 표현식은 하나의 루트 요소만 가질 수 있습니다. 그렇지 않으면 오류가 발생합니다.
• 문제점: 여러 요소를 반환하려고 할 때 추가적인 <div>로 감싸는 것은 DOM에 불필요한 요소를 추가하게 됩니다.
• 리액트 프래그먼트의 활용: <Fragment> ... </Fragment> 또는 단축 문법인 <> ... </>를 사용하여 DOM에 영향을 주지 않으면서 여러 요소를 그룹화할 수 있습니다.

// 표준 문법
import { Fragment } from 'react';

return (
  <Fragment>
    <h2>Welcome!</h2>
    <p>React is awesome!</p>
  </Fragment>
);

// 단축문법
return (
  <>
    <h2>Welcome!</h2>
    <p>React is awesome!</p>
  </>
);

• 장점:
  • 불필요한 DOM 요소를 추가하지 않습니다.
  • 코드의 가독성을 높이고 유지보수를 용이하게 합니다.
  • JSX의 규칙을 준수하면서도 깨끗한 렌더링 결과를 얻을 수 있습니다.

[JSX에서 여러 요소를 반환하려 함]
           │
           ▼
[문제 발생]
- 오류 메시지: "Adjacent JSX elements must be wrapped in an enclosing tag"
- 이유: 하나의 루트 요소만 허용됨
           │
           ▼
[해결책 1: <div>로 감싸기]
           │
           ▼
[단점]
- 불필요한 <div>가 DOM에 추가됨
- DOM 구조가 복잡해짐
           │
           ▼
[해결책 2: 리액트 프래그먼트 사용]
           │
           ├─ 방법 1: <Fragment> ... </Fragment>
           │         - 'react'로부터 Fragment를 import
           │
           ├─ 방법 2: <> ... </>
           │         - 단축 문법, import 불필요
           │
           ▼
[결과]
- 여러 요소를 그룹화하여 하나의 루트 요소로 만듦
- DOM에 불필요한 요소를 추가하지 않음
- 깨끗한 렌더링 결과 획득

JSX에서 여러 형제 요소 반환 ──▶ 오류 발생
                                 │
                                 ▼
                        "하나의 루트 요소만 허용됩니다"
                                 │
                                 ▼
                 ┌───────────────┴───────────────┐
                 │                               │
                 ▼                               ▼
        <div>로 감싸기                      리액트 프래그먼트 사용
           │                                       │
           ▼                                       ▼
  불필요한 <div> 추가                         DOM에 영향 없음
           │                                       │
           ▼                                       ▼
    DOM 구조 복잡화                            깨끗한 DOM 구조

116. refs, portals / Refs(참조) 소개: Refs(참조)로 HTML 요소 연결 및 접근

• Refs란 무엇인가?

  • React의 refs는 DOM 요소에 직접 접근할 수 있는 방법을 제공합니다.
  • useRef 훅을 사용하여 참조를 생성하고, JSX 요소의 ref 속성을 통해 연결합니다.
  • 참조된 요소는 current 속성을 통해 접근할 수 있으며, 해당 요소의 모든 속성과 메서드에 접근 가능합니다.

• 컴포넌트 간소화 방법

  • 입력 필드의 값을 매번 상태로 관리하고 onChange 이벤트를 처리하는 대신, 필요한 시점에만 참조를 통해 값을 가져올 수 있습니다.
  • 이로써 불필요한 상태 변수(submitted 등)와 함수(handleChange)를 제거하여 컴포넌트를 간결하게 만들 수 있습니다.
  • 버튼 클릭 시에만 상태를 업데이트하고, 그 외에는 입력 필드의 값 변화에 컴포넌트가 반응하지 않습니다.

• 코드 간소화의 이점

  • 불필요한 리렌더링을 방지하여 성능을 향상시킵니다.
  • 코드의 양을 줄이고 가독성을 높입니다.
  • 상태 관리의 복잡성을 줄여 유지보수를 용이하게 합니다.

// 데이터 흐름 도식화

[사용자 입력]
      │
      ▼
┌──────────────────────┐
│ <input type="text"   │
│       ref={playerNameRef} /> │
└──────────────────────┘
      │
[사용자가 입력 필드에 텍스트 입력]
      │
      ▼
(입력 필드에만 값이 표시됨, 컴포넌트 상태 변화 없음)

────────────────────────────────────

[사용자가 'Set Name' 버튼 클릭]
      │
      ▼
┌───────────────────────────┐
│    handleClick 함수 호출   │
└───────────────────────────┘
      │
      ▼
[참조를 통해 입력 값 가져오기]
      │
      ▼
┌───────────────────────────┐
│ playerNameRef.current.value │
└───────────────────────────┘
      │
      ▼
[enteredPlayerName 상태 업데이트]
      │
      ▼
[컴포넌트 리렌더링]

────────────────────────────────────

[조건부 렌더링]
      │
      ▼
┌───────────────────────────┐
│ <h2>Welcome               │
│   {enteredPlayerName || 'unknown entity'} │
│ </h2>                      │
└───────────────────────────┘
      │
      ▼
[화면에 결과 출력]

// 시각적 흐름도:

1. 입력 단계
[사용자]
   │
   ▼
입력 필드에 텍스트 입력
   │
   ▼
<input type="text" ref={playerNameRef} />

2. 버튼 클릭 및 처리
[사용자]
   │
   ▼
'Set Name' 버튼 클릭
   │
   ▼
handleClick 함수 실행
   │
   ▼
playerNameRef.current.value 로 입력 값 획득
   │
   ▼
setEnteredPlayerName 로 상태 업데이트

3. 렌더링 및 출력
[React]
   │
   ▼
상태 변경 감지, 컴포넌트 리렌더링
   │
   ▼
조건부 렌더링으로 출력 결정
   │
   ├─ enteredPlayerName 이 빈 문자열이 아닌 경우:
   │       'Welcome [이름]' 출력
   │
   └─ enteredPlayerName 이 빈 문자열인 경우:
           'Welcome unknown entity' 출력

4. 최종 출력
[화면]
   │
   ▼
사용자에게 결과 표시

이와 같이 useRef를 활용하여 컴포넌트를 간소화하고, 필요한 시점에만 입력 값을 참조하여 상태를 업데이트함으로써 더욱 효율적인 React 컴포넌트를 만들 수 있습니다. 불필요한 상태 관리와 이벤트 핸들러를 제거하여 코드가 간결해지고, 유지보수가 쉬워집니다.

117. refs, portals / Refs(참조)로 DOM 제어

리액트에서 refs(참조)를 사용하여 입력 필드를 초기화하려는 아이디어는 이해할 수 있습니다. handleClick 함수 내에서 playerName.current.value = ''로 입력 값을 지우면 원하는 동작을 얻을 수 있습니다. 그러나 이 접근 방식은 리액트의 선언적 프로그래밍 철학과는 맞지 않습니다.

• 선언적 프로그래밍 vs. 명령적 프로그래밍
  • 선언적 프로그래밍: 리액트는 UI의 상태를 선언적으로 기술합니다. 즉, 상태(state)가 변경되면 리액트가 자동으로 UI를 업데이트합니다.
  • 명령적 프로그래밍: 개발자가 직접 DOM 요소를 조작하여 UI를 변경합니다.

playerName.current.value = ''와 같이 직접 DOM 요소의 값을 변경하는 것은 명령적 프로그래밍에 해당하며, 리액트의 선언적 접근 방식에서 벗어납니다. 이는 다음과 같은 문제를 일으킬 수 있습니다:

• UI와 상태의 불일치: 리액트의 상태 관리와 별개로 DOM을 직접 변경하면, 상태와 UI 간의 일관성이 깨질 수 있습니다.

• 예상치 못한 동작: 리액트의 라이프사이클과 최적화 메커니즘을 우회하게 되어 버그가 발생할 가능성이 높아집니다.

• 올바른 접근 방식: 상태를 활용한 입력 값 관리

  • 입력 필드의 값을 지우기 위해서는 상태를 활용하는 것이 리액트의 권장 방식입니다. 다음과 같이 useState를 사용하여 입력 값을 관리할 수 있습니다.

// 1. 상태 변수 추가
const [enteredPlayerName, setEnteredPlayerName] = useState('');

// 2. 입력 필드에 상태 연결
<input
  type="text"
  value={enteredPlayerName}
  onChange={(event) => setEnteredPlayerName(event.target.value)}
/>

// 3. 버튼 클릭 시 상태 초기화
function handleClick() {
  // 필요한 로직 수행
  setEnteredPlayerName(''); // 상태를 빈 문자열로 설정하여 입력 필드 초기화
}

// 4. 이름 출력 시 상태 사용
<h2>Welcome {enteredPlayerName || 'unknown entity'}</h2>

• 이렇게 변경하면 다음과 같은 장점이 있습니다:

  • 일관성 유지: 상태 변화에 따라 UI가 업데이트되므로 상태와 UI 간의 일관성이 보장됩니다.
  • 리액트 철학 준수: 선언적 프로그래밍 방식에 맞게 컴포넌트를 구성하여 유지보수성과 확장성이 향상됩니다.
  • 예상 가능한 동작: 리액트의 라이프사이클과 최적화 메커니즘을 활용하므로 예기치 않은 버그를 방지할 수 있습니다.

• 요약

  • Refs 사용 시 주의점: Refs는 DOM 요소에 직접 접근해야 할 때 유용하지만, 가능한 한 사용을 최소화하는 것이 좋습니다.
  • 상태 관리 활용: 입력 필드의 값과 같은 UI 요소는 상태를 통해 관리하여 리액트의 선언적 프로그래밍 방식을 따르는 것이 바람직합니다.
  • 최신 리액트 패턴 적용: 상태와 이벤트 핸들러를 활용하여 컴포넌트를 구성하면 코드의 가독성과 유지보수성이 향상됩니다.

118. refs, portals / Refs(참조) VS State(상태) 값

1. 상태(state)란 무엇인가?

   • 정의: 상태는 컴포넌트의 데이터 변경을 추적하고, 변경 시 컴포넌트를 다시 렌더링하여 UI를 업데이트하는 값입니다.
   • 특징:
     • 상태가 변경되면 컴포넌트가 재실행(재렌더링)됩니다.
     • UI에 직접적으로 반영되어야 하는 값들을 관리합니다.

2. 참조(refs)란 무엇인가?

   • 정의: 참조는 React에서 DOM 요소나 컴포넌트의 특정 인스턴스에 직접 접근할 수 있도록 하는 객체입니다.
   • 특징:
     • 참조가 변경되어도 컴포넌트는 재렌더링되지 않습니다.
     • DOM 요소에 직접 접근하거나, 컴포넌트 간의 데이터 흐름과 관계없는 값을 저장할 때 사용합니다.

3. 상태를 참조로 대체할 수 없는 이유

   • 초기 렌더링 시 참조의 값은 undefined:
     • 컴포넌트가 처음 렌더링될 때 ref.current는 아직 연결되지 않은 상태입니다.
     • 따라서 ref.current.value에 접근하면 undefined 에러가 발생합니다.
   • 참조 변경 시 컴포넌트가 재렌더링되지 않음:
     • 참조의 값이 바뀌어도 컴포넌트는 재실행되지 않기 때문에 UI가 업데이트되지 않습니다.
   • 상태는 UI 업데이트를 위해 필요:
     • 상태를 통해 값이 변경될 때마다 컴포넌트를 재실행하여 최신 UI를 반영합니다.

4. 상태와 참조의 목적과 사용 시기

   • 상태(state):
     • 목적: UI에 직접적으로 영향을 미치는 값들을 관리하고, 변경 시 UI를 업데이트합니다.
     • 사용 시기: 사용자 입력, 네트워크 응답 등으로 인해 변경되는 값들이 있을 때 사용합니다.
   • 참조(refs):
     • 목적: 컴포넌트의 렌더링 사이클과 관계없이 값을 저장하거나, DOM 요소에 직접 접근해야 할 때 사용합니다.
     • 사용 시기: 포커스 제어, 텍스트 선택, 미디어 재생 제어 등 DOM 조작이 필요할 때 사용합니다.

5. 참조와 상태를 함께 사용하는 예시

   • 상황: 입력 필드의 값을 읽어와서 상태로 관리하여 UI에 반영해야 할 때.

   • 구현 방법:

     const [enteredPlayerName, setEnteredPlayerName] = useState('');
     const playerNameRef = useRef();
     
     function handleClick() {
       const enteredName = playerNameRef.current.value;
       setEnteredPlayerName(enteredName);
     }

   • 설명:

     • 참조를 사용하여 입력 필드의 값을 가져옵니다.
     • 상태를 업데이트하여 컴포넌트가 재실행되고, UI에 변경 사항이 반영됩니다.

• 핵심 내용 정리
  • 참조(refs)와 상태(state)의 차이점 이해하기:
    • 상태(state):
      • 컴포넌트의 데이터 변경을 추적하며, 변경 시 컴포넌트를 재렌더링하여 UI를 업데이트합니다.
      • 상태 업데이트 함수(setState)를 호출하면 컴포넌트 함수가 다시 실행됩니다.
      • UI에 직접적인 영향을 미치는 값들을 관리합니다.
    • 참조(refs):
      • 컴포넌트의 렌더링 사이클과 관계없이 값을 저장하거나 DOM 요소에 직접 접근할 수 있습니다.
      • 참조의 값이 변경되어도 컴포넌트는 재렌더링되지 않습니다.
      • 내부에서 보이지 않는 값들이나 UI에 직접적인 영향을 주지 않는 값들을 관리합니다.
    • 상태를 참조로 대체할 수 없는 이유:
      • 참조는 컴포넌트의 재렌더링을 트리거하지 않으므로, UI 업데이트가 필요할 때는 상태를 사용해야 합니다.
      • 초기 렌더링 시 참조의 current 속성은 정의되지 않을 수 있으며, 이로 인해 에러가 발생할 수 있습니다.
    • 올바른 사용 방법:
      • UI 업데이트가 필요한 값: 상태(state)를 사용하여 관리합니다.
      • DOM 요소에 직접 접근이 필요한 경우: 참조(refs)를 사용합니다.
      • 둘을 함께 사용하여 장점 극대화: 참조를 통해 값을 가져오고, 상태를 통해 UI를 업데이트합니다.
    • 예시 설명:
      • 입력 필드에서 참조를 사용하여 값을 가져오지만, 가져온 값을 상태에 저장하여 컴포넌트를 재실행하고 UI에 반영합니다.
      • 이렇게 하면 참조와 상태의 장점을 모두 활용할 수 있습니다.

// 데이터 흐름 도식화

[컴포넌트 초기 렌더링]
       │
       ├─ 상태 초기화:
       │     enteredPlayerName = ''
       ├─ 참조 생성:
       │     playerNameRef = { current: undefined }
       │
       └─ JSX 렌더링:
             <input type="text" ref={playerNameRef} />
             <h2>Welcome {enteredPlayerName || 'unknown entity'}</h2>

────────────────────────────────────────

[사용자 입력]
       │
       └─ 입력 필드에 텍스트 입력 (예: "Alice")
             (참조된 input 요소에 값이 입력됨)

────────────────────────────────────────

[사용자가 '이름 설정하기' 버튼 클릭]
       │
       └─ handleClick 함수 호출
             │
             ├─ playerNameRef.current.value로 입력 값 가져오기
             │     enteredName = "Alice"
             │
             ├─ setEnteredPlayerName(enteredName) 호출
             │     상태 업데이트, 컴포넌트 재렌더링 트리거
             │
             └─ playerNameRef.current.value = '' 로 입력 필드 초기화

────────────────────────────────────────

[컴포넌트 재렌더링]
       │
       ├─ 상태 값:
       │     enteredPlayerName = "Alice"
       ├─ 참조 값:
       │     playerNameRef.current = [input 요소]
       │
       └─ JSX 렌더링:
             <input type="text" ref={playerNameRef} value="" />
             <h2>Welcome Alice</h2>

────────────────────────────────────────

[화면 출력]
       │
       ├─ 입력 필드는 비어 있음
       └─ 화면에 "Welcome Alice" 출력

// 1. 초기 렌더링 단계
[초기 상태]
│
├─ enteredPlayerName = ''
├─ playerNameRef = { current: undefined }
│
└─ <input ref={playerNameRef} />

// 2. 사용자 입력 단계
[사용자 입력]
│
└─ 입력 필드에 "Alice" 입력
    (playerNameRef.current.value = "Alice")

// 3. 버튼 클릭 및 처리 단계
[버튼 클릭]
│
└─ handleClick 함수 실행
    │
    ├─ enteredName = playerNameRef.current.value
    │     (enteredName = "Alice")
    ├─ setEnteredPlayerName(enteredName)
    │     (상태 업데이트, 컴포넌트 재렌더링)
    └─ playerNameRef.current.value = ''
        (입력 필드 초기화)

// 4. 컴포넌트 재렌더링 단계
[재렌더링]
│
├─ enteredPlayerName = "Alice"
└─ 화면 업데이트
    │
    ├─ 입력 필드는 빈 문자열
    └─ <h2>Welcome Alice</h2> 출력

// 5. 최종 결과
[화면 표시]
│
├─ 입력 필드: 빈 상태
└─ 화면에 "Welcome Alice" 출력

• 설명:
  • 초기 렌더링 시에는 참조의 current 속성이 아직 설정되지 않았기 때문에 playerNameRef.current는 undefined입니다.
  • 사용자가 입력 필드에 텍스트를 입력하면, 참조된 input 요소의 value 속성에 값이 저장됩니다.
  • '이름 설정하기' 버튼을 클릭하면:
    • handleClick 함수가 호출되어 참조를 통해 입력 값을 가져옵니다.
    • 상태 업데이트 함수 setEnteredPlayerName을 호출하여 상태를 변경합니다.
    • 상태가 변경되었으므로 컴포넌트가 재실행되고 UI가 업데이트됩니다.
    • 입력 필드를 초기화하기 위해 playerNameRef.current.value = ''를 사용하지만, 이는 명령적 프로그래밍 방식이며, 가능한 한 상태 관리를 통해 처리하는 것이 좋습니다.
  • 컴포넌트가 재렌더링되면:
    • 업데이트된 상태 값에 따라 UI가 반영됩니다.
    • 입력 필드는 빈 문자열로 표시되고, 화면에는 새로운 이름이 출력됩니다.

119. refs, portals / 데모 프로젝트에 도전 과제 추가하기

• 목표: React 앱을 발전시켜 타이머 도전 기능을 추가하고, 이를 위해 TimerChallenge 컴포넌트를 생성함
• TimerChallenge 컴포넌트:
  • 재사용 가능한 컴포넌트로, 다양한 설정으로 사용 가능
  • title과 targetTime이라는 props를 받아 도전 제목과 목표 시간을 표시
  • 조건부 렌더링을 통해 복수형 처리 및 상태에 따른 UI 업데이트
  • 버튼을 통해 타이머 시작 및 멈춤 기능 제공 예정
• App 컴포넌트에서의 활용:
  • 여러 개의 TimerChallenge 인스턴스를 생성하여 다양한 도전 제공
  • 도전 난이도에 따라 targetTime을 다르게 설정하여 사용자에게 다양한 난이도의 타이머 도전 제공
• 향후 계획:
  • 상태(state)와 참조(ref)를 사용하여 타이머의 실제 동작 구현
  • 버튼 클릭 시 타이머가 시작되고, 목표 시간에 따라 동작하도록 기능 추가
  • UI가 타이머의 상태 변화에 따라 동적으로 업데이트되도록 구현

// 시각적 데이터 흐름

App 컴포넌트
│
└── <div id="challenges">
     │
     ├── <TimerChallenge title="Easy" targetTime={1} />
     │
     ├── <TimerChallenge title="Not Easy" targetTime={5} />
     │
     ├── <TimerChallenge title="Getting tough" targetTime={10} />
     │
     └── <TimerChallenge title="Pros only" targetTime={15} />

각 TimerChallenge 컴포넌트
│
├── Props:
│     - title
│     - targetTime
│
├── State:
│     - isActive
│
├── 렌더링되는 UI:
│     - <h2>{title}</h2>
│     - <p className="challenge-time">{targetTime} second(s)</p>
│     - <p>
│          <button onClick={...}>
│              {isActive ? "도전 끝내기" : "도전 시작"}
│          </button>
│       </p>
│     - <p className={isActive ? "active" : ""}>
│          {isActive ? "타이머가 실행 중입니다..." : "타이머가 비활성화됐습니다"}
│       </p>
│
└── 이벤트 흐름:
      - 버튼 클릭 시:
          - isActive 상태 토글
          - UI 업데이트
          - 타이머 로직 실행 (추후 구현)

120. refs, portals / 타이머 설정 & State(상태) 관리

• 문제점: handleStop 함수에서 handleStart 함수 내에서 설정한 타이머에 접근해야 합니다.
• 해결 방법: useRef 훅을 사용하여 타이머 ID를 저장하고, 이를 통해 여러 함수에서 타이머에 접근합니다.
• 구현 내용:
  • timerRef 참조를 생성하여 타이머 ID를 저장합니다.
  • handleStart 함수에서 타이머를 설정하고, 타이머 ID를 timerRef.current에 저장합니다.
  • handleStop 함수에서 clearTimeout(timerRef.current)를 호출하여 타이머를 취소합니다.
  • 타이머의 시작 및 종료에 따라 timerStarted와 timerExpired 상태를 업데이트하여 UI를 동적으로 변경합니다.
• 중요 포인트:
  • useRef는 컴포넌트가 재렌더링되어도 값이 유지되며, 참조 값이 변경되어도 재렌더링을 트리거하지 않습니다.
  • 상태와 참조를 적절히 활용하여 타이머 기능을 구현하고, 컴포넌트의 복잡성을 관리합니다.

// 데이터 흐름 도식화

[사용자가 '도전 시작' 버튼 클릭]
        │
        ▼
[handleStart 함수 호출]
        │
        ├─ setTimerStarted(true)
        ├─ setTimerExpired(false)
        ├─ timerRef.current = setTimeout(...)
        │     └─ 타이머 설정 (targetTime * 1000 밀리초 후 실행)
        │
        ▼
[타이머 실행 중]
        │
        ├─ UI 업데이트
        │     - 버튼 텍스트: '중지'
        │     - 메시지: '타이머가 실행 중입니다...'
        │     - 클래스 이름: 'active'
        │
        │
[사용자가 '중지' 버튼 클릭]
        │
        ▼
[handleStop 함수 호출]
        │
        ├─ clearTimeout(timerRef.current)
        └─ setTimerStarted(false)
            └─ UI 업데이트
                - 버튼 텍스트: '도전 시작'
                - 메시지: '타이머가 비활성화됐습니다'

[타이머가 만료된 경우]
        │
        ▼
[타이머 콜백 함수 실행]
        │
        ├─ setTimerExpired(true)
        └─ setTimerStarted(false)
            └─ UI 업데이트
                - '졌습니다' 메시지 표시
                - 버튼 텍스트: '도전 시작'
                - 메시지: '타이머가 비활성화됐습니다'

121. refs, portals / "DOM 요소 연결" 외 Refs(참조) 활용법

1. 문제 상황 이해하기

   • 타이머 관리 필요성: 컴포넌트 내에서 setTimeout을 사용하여 타이머를 설정하고, 이를 중지하거나 취소해야 하는 상황이 있습니다.
   • 변수의 한계:
     • 컴포넌트 함수 내부에 변수를 선언하면 컴포넌트가 재렌더링될 때마다 변수가 재생성됩니다.
     • 컴포넌트 함수 외부에 변수를 선언하면 모든 컴포넌트 인스턴스 간에 변수가 공유되어 예상치 못한 동작이 발생합니다.

2. 참조(useRef)의 사용 이유

   • 값 유지: 참조는 컴포넌트 재렌더링 간에도 값을 유지합니다.
   • 인스턴스별 독립성: 각 컴포넌트 인스턴스마다 고유한 참조 객체가 생성되므로 인스턴스 간 값이 공유되지 않습니다.
   • 재렌더링 트리거하지 않음: 참조의 current 값을 변경해도 컴포넌트가 재렌더링되지 않습니다.

3. 참조 생성 및 사용 방법

   • 참조 생성:

     import { useRef } from 'react';
     
     function TimerChallenge() {
       const timerRef = useRef();
       // ...
     }

   • 타이머 설정 시 참조에 저장:

     function handleStart() {
       timerRef.current = setTimeout(() => {
         // 타이머 만료 시 실행할 코드
       }, targetTime * 1000);
     }

   • 타이머 취소 시 참조 사용:

     function handleStop() {
       clearTimeout(timerRef.current);
     }

4. 상태와 참조의 차이점

   • 상태(State):
     • UI에 직접적인 영향을 주는 값 관리.
     • 상태 값 변경 시 컴포넌트가 재렌더링됨.
   • 참조(Refs):
     • UI에 직접적으로 영향을 주지 않는 값 관리.
     • 참조 값 변경 시 컴포넌트가 재렌더링되지 않음.
     • 재렌더링 간에도 값이 유지됨.

5. 타이머 시작 및 중지 로직 구현

   • 상태 변수 정의:

     const [timerStarted, setTimerStarted] = useState(false);
     const [timerExpired, setTimerExpired] = useState(false);

   • 타이머 시작 함수:

     function handleStart() {
       setTimerStarted(true);
       setTimerExpired(false);
       timerRef.current = setTimeout(() => {
         setTimerExpired(true);
         setTimerStarted(false);
       }, targetTime * 1000);
     }

   • 타이머 중지 함수:

     function handleStop() {
       clearTimeout(timerRef.current);
       setTimerStarted(false);
     }

6. 버튼 클릭 시 동작 제어

   • 조건부로 함수 연결:

     <button onClick={timerStarted ? handleStop : handleStart}>
       {timerStarted ? '중지' : '도전 시작'}
     </button>

7. 여러 컴포넌트 인스턴스에서의 동작

   • 각 컴포넌트 인스턴스는 고유한 timerRef를 가지므로 타이머 간의 간섭이 발생하지 않습니다.
   • 컴포넌트 함수 내부에서 참조를 생성하므로 인스턴스별로 독립적인 타이머 관리가 가능합니다.

8. 참조 사용 시 주의사항

   • 참조는 재렌더링 시 초기화되지 않음: 컴포넌트 함수가 재실행되어도 참조의 값은 유지됩니다.
   • 참조 변경은 재렌더링을 트리거하지 않음: 참조의 값을 변경해도 컴포넌트는 재렌더링되지 않으므로, UI 업데이트가 필요할 경우 상태를 사용해야 합니다.

• 핵심 내용 정리
  • 문제점: 변수로 타이머 ID를 관리하면 컴포넌트 재렌더링 시 변수 값이 초기화되거나, 컴포넌트 인스턴스 간에 변수가 공유되어 예상치 못한 동작이 발생합니다.
  • 해결책: useRef 훅을 사용하여 타이머 ID를 참조에 저장합니다.
    • 참조는 컴포넌트 재렌더링 간에도 값이 유지되고, 인스턴스별로 독립적인 값을 가집니다.
  • 참조의 이점:
    • 컴포넌트 인스턴스 간 독립성: 각 컴포넌트 인스턴스는 고유한 참조를 가지므로, 다른 인스턴스와 간섭 없이 값을 관리할 수 있습니다.
    • 재렌더링 시 값 유지: 컴포넌트가 재실행되어도 참조의 값은 유지되므로 타이머 ID 등을 안전하게 보관할 수 있습니다.
  • 상태 vs 참조:
    • **상태(State)**는 값 변경 시 컴포넌트를 재렌더링하며, UI에 직접적인 영향을 주는 값을 관리합니다.
    • **참조(Refs)**는 값 변경 시 컴포넌트를 재렌더링하지 않으며, UI에 직접 영향을 주지 않는 값을 관리합니다.
  • 적용 사례:
    • 타이머 ID 관리: 타이머 ID는 UI에 직접적인 영향을 주지 않으면서 재렌더링 간에도 유지되어야 하므로 참조로 관리합니다.
    • DOM 요소 접근 외에도 참조 활용: 참조는 DOM 요소뿐만 아니라, 컴포넌트 내부에서 유지되어야 하는 값들을 관리하는 데에도 유용합니다.

// 데이터 흐름 도식화

[TimerChallenge 컴포넌트 인스턴스 생성]
        │
        ├─ 상태 변수 초기화:
        │     - timerStarted = false
        │     - timerExpired = false
        │
        └─ 참조 생성:
              - timerRef = useRef()

────────────────────────────────────

[사용자가 '도전 시작' 버튼 클릭]
        │
        ▼
[handleStart 함수 실행]
        │
        ├─ setTimerStarted(true)
        ├─ setTimerExpired(false)
        ├─ timerRef.current = setTimeout(...)
        │     └─ 타이머 설정 (targetTime * 1000 밀리초 후 실행)
        │
        └─ 컴포넌트 재렌더링 (timerStarted 상태 변경으로 인해)

────────────────────────────────────

[타이머 실행 중]
        │
        ├─ 사용자가 '중지' 버튼 클릭 가능
        │
        └─ 타이머 만료 시까지 대기

────────────────────────────────────

[사용자가 '중지' 버튼 클릭]
        │
        ▼
[handleStop 함수 실행]
        │
        ├─ clearTimeout(timerRef.current)
        ├─ setTimerStarted(false)
        │
        └─ 컴포넌트 재렌더링 (timerStarted 상태 변경으로 인해)

[타이머 만료 전에 중지됨]
        │
        └─ '졌습니다' 메시지 표시되지 않음

────────────────────────────────────

[타이머가 만료된 경우]
        │
        ▼
[setTimeout 콜백 함수 실행]
        │
        ├─ setTimerExpired(true)
        ├─ setTimerStarted(false)
        │
        └─ 컴포넌트 재렌더링 (상태 변경으로 인해)
            │
            └─ '졌습니다' 메시지 표시

────────────────────────────────────

[여러 컴포넌트 인스턴스 동작]
        │
        ├─ 각 인스턴스는 고유한 timerRef를 가짐
        │
        ├─ 인스턴스 A에서 타이머 시작
        │
        ├─ 인스턴스 B에서 타이머 시작
        │
        ├─ 인스턴스 A에서 타이머 중지
        │
        └─ 각 인스턴스의 타이머는 독립적으로 관리됨

122. refs, portals / 모달 컴포넌트 추가하기

• ResultModal 컴포넌트를 생성하여 게임 결과를 표시하는 모달 다이얼로그를 구현했습니다.
  • <dialog> HTML 요소를 사용하여 내장 스타일과 기능(백드롭 등)을 활용했습니다.
  • 문제점: <dialog> 요소에 open 속성을 직접 추가하면 백드롭이 적용되지 않습니다.
  • 해결 방법:
    • 참조(ref)를 사용하여 다이얼로그를 제어합니다.
    • ResultModal에서 forwardRef를 사용하여 부모 컴포넌트(TimerChallenge)로부터 전달된 참조를 <dialog> 요소에 연결합니다.
    • TimerChallenge에서 useRef로 참조를 생성하고, useEffect를 통해 상태 변경 시 showModal() 메서드를 호출하여 다이얼로그를 엽니다.
  • 이점:
    • showModal() 메서드를 사용하여 다이얼로그를 열면 백드롭이 적용되어 더 나은 사용자 경험을 제공합니다.
    • 상태와 참조를 적절히 활용하여 컴포넌트 간에 DOM 요소를 제어할 수 있습니다.
  • 향후 개선 사항:
    • 게임 결과에 따라 점수를 계산하고 표시할 수 있습니다.
    • 승리와 패배에 따른 다양한 메시지를 표시할 수 있습니다.

// ResultModal.jsx
import React, { forwardRef } from 'react';

const ResultModal = forwardRef(({ result, targetTime }, ref) => (
  <dialog className="ResultModal" ref={ref}>
    <h2>{result === 'lost' ? '졌습니다' : '이겼습니다'}</h2>
    <p>
      목표 시간은 <strong>{targetTime}</strong>초였습니다.
    </p>
    <form method="dialog">
      <button>닫기</button>
    </form>
  </dialog>
));

export default ResultModal;

[TimerChallenge 컴포넌트]
      │
      ├─ 상태 관리:
      │     - timerExpired (타이머 만료 여부)
      │     - 기타 게임 상태
      │
      ├─ 참조 생성:
      │     - dialogRef = useRef()
      │
      ├─ useEffect 훅 설정:
      │     - timerExpired가 true로 변경될 때 실행
      │     - dialogRef.current.showModal() 호출
      │
      ├─ JSX 렌더링:
      │     - <section className="challenge">...</section>
      │     - {timerExpired && <ResultModal ref={dialogRef} ... />}
      │
      └─ 사용자 입력 처리:
            - 타이머 시작/중지 버튼 클릭 등

[상태 변경: timerExpired === true]
      │
      └─ useEffect 실행
            │
            └─ dialogRef.current.showModal() 호출
                  │
                  └─ [ResultModal의 <dialog> 요소 열림]
                        - 백드롭 적용
                        - 다이얼로그 표시

[사용자]
      │
      └─ 다이얼로그에서 '닫기' 버튼 클릭
            │
            └─ <form method="dialog">를 통해 다이얼로그 닫힘

[다이얼로그 닫힘 후]
      │
      └─ 게임 재시작 또는 다른 동작 가능

123. refs, portals / 커스텀 컴포넌트로 Refs(참조) 전달

1. 부모 컴포넌트에서 ref 생성

   // TimerChallenge.jsx
   import React, { useRef } from 'react';
   
   function TimerChallenge(props) {
     const dialogRef = useRef();
   
     // ...
   }

2. ref를 자식 컴포넌트에 전달

   // TimerChallenge.jsx
   return (
     <>
       {/* 기타 컴포넌트 */}
       <ResultModal ref={dialogRef} result="lost" targetTime={targetTime} />
     </>
   );

3. 자식 컴포넌트에서 forwardRef 사용하여 ref 받기

   // ResultModal.jsx
   import React, { forwardRef } from 'react';
   
   const ResultModal = forwardRef((props, ref) => {
     const { result, targetTime } = props;
   
     return (
       <dialog className="ResultModal" ref={ref}>
         {/* 모달 내용 */}
       </dialog>
     );
   });
   
   export default ResultModal;

4. forwardRef로 컴포넌트 감싸기 및 ref 매개변수 받기

   • 컴포넌트 함수를 forwardRef로 감싸고, 두 번째 매개변수로 ref를 받습니다.

5. ref를 자식 컴포넌트의 DOM 요소에 연결

   • 전달받은 ref를 <dialog> 요소의 ref 속성에 연결합니다.

6. 부모 컴포넌트에서 ref를 통해 자식의 DOM 요소 제어

   // TimerChallenge.jsx
   import React, { useEffect } from 'react';
   
   useEffect(() => {
     if (timerExpired) {
       dialogRef.current.showModal();
     }
   }, [timerExpired]);

   • dialogRef.current를 사용하여 <dialog> 요소에 접근하고 showModal() 메서드를 호출합니다.

7. ResultModal 컴포넌트를 항상 렌더링

   • 조건부 렌더링 대신 항상 컴포넌트를 렌더링하여 ref 연결이 유지되도록 합니다.

• 핵심 내용 정리
  • 문제점: 부모 컴포넌트에서 자식 컴포넌트의 특정 DOM 요소(dialog)에 접근하여 제어하려고 할 때, 일반적인 방법으로는 ref를 전달할 수 없습니다.
  • 해결책: React의 forwardRef 함수를 사용하여 부모 컴포넌트에서 생성한 ref를 자식 컴포넌트로 전달하고, 자식 컴포넌트에서 해당 ref를 DOM 요소에 연결합니다.
  • 구현 방법:
    1. 부모 컴포넌트에서 useRef로 ref 생성.
    2. 자식 컴포넌트를 forwardRef로 감싸고, ref를 두 번째 매개변수로 받음.
    3. 자식 컴포넌트의 DOM 요소에 ref 연결.
    4. 부모 컴포넌트에서 ref.current를 통해 자식의 DOM 요소 제어.
  • 결과: 부모 컴포넌트에서 자식 컴포넌트의 DOM 요소에 접근하여 메서드를 호출할 수 있으며, 이를 통해 모달 창을 표시하거나 숨길 수 있습니다.

[TimerChallenge 컴포넌트]
      │
      ├─ 참조 생성:
      │   └─ const dialogRef = useRef();
      │
      ├─ 자식 컴포넌트에 ref 전달:
      │   └─ <ResultModal ref={dialogRef} ... />
      │
      ├─ 상태 변화 감지 (timerExpired):
      │   └─ useEffect(() => {
      │         if (timerExpired) {
      │           dialogRef.current.showModal();
      │         }
      │       }, [timerExpired]);
      │
      └─ dialogRef를 통해 자식의 <dialog> 요소 제어

──────────────────────────────────────────

[ResultModal 컴포넌트]
      │
      ├─ forwardRef로 컴포넌트 정의:
      │   └─ const ResultModal = forwardRef((props, ref) => { ... });
      │
      ├─ 전달받은 ref를 <dialog>에 연결:
      │   └─ <dialog ref={ref}> ... </dialog>
      │
      └─ 부모 컴포넌트에서 전달된 ref를 통해 제어 가능

──────────────────────────────────────────

[실행 흐름]
      │
      ├─ TimerChallenge에서 타이머 시작
      │
      ├─ 타이머 만료 시 timerExpired 상태 변경
      │
      ├─ useEffect 훅에서 dialogRef.current.showModal() 호출
      │
      ├─ ResultModal의 <dialog> 요소 표시
      │
      └─ 사용자에게 모달 창이 나타남

// 1. 참조 생성 및 전달

TimerChallenge
┌────────────────────────────────────────────┐
│ const dialogRef = useRef();                │
│                                            │
│ return (                                   │
│   <>                                       │
│     {/* 기타 컴포넌트 */}                   │
│     <ResultModal ref={dialogRef} ... />    │
│   </>                                      │
│ );                                         │
└────────────────────────────────────────────┘
                     │
                     ▼
ResultModal
┌────────────────────────────────────────────┐
│ const ResultModal = forwardRef((props, ref) => { │
│   return (                                 │
│     <dialog ref={ref}>                     │
│       {/* 모달 내용 */}                     │
│     </dialog>                              │
│   );                                       │
│ });                                        │
└────────────────────────────────────────────┘

// 2. 상태 변화에 따른 모달 제어

TimerChallenge
┌────────────────────────────────────────────┐
│ useEffect(() => {                          │
│   if (timerExpired) {                      │
│     dialogRef.current.showModal();         │
│   }                                        │
│ }, [timerExpired]);                        │
└────────────────────────────────────────────┘
                     │
                     ▼
ResultModal의 <dialog> 요소가 표시됨

124. refs, portals / userImperativeHandle 훅으로 컴포넌트 API 노출시

• 문제 인식: 부모 컴포넌트가 자식 컴포넌트의 내부 DOM 요소에 직접 접근하여 메소드를 호출하면, 컴포넌트의 내부 구현에 의존하게 되어 유지보수가 어렵습니다.
• 해결 방법: useImperativeHandle 훅과 forwardRef 함수를 사용하여 자식 컴포넌트가 특정 메소드(open 등)를 노출하고, 부모 컴포넌트는 이 메소드를 통해 기능을 사용할 수 있도록 합니다.
• 이점:
  • 캡슐화: 자식 컴포넌트의 내부 구현을 숨기고 필요한 인터페이스만 제공
  • 유지보수성: 내부 구조 변경 시에도 외부 영향 최소화
  • 협업 효율성: 여러 개발자들이 함께 작업할 때, 컴포넌트의 사용법을 쉽게 이해하고 적용할 수 있음
• 적용 방법:
  1. 자식 컴포넌트를 forwardRef로 감싼다.
  2. useImperativeHandle 훅을 사용하여 외부에 노출할 메소드나 속성을 정의한다.
  3. 부모 컴포넌트에서 ref를 생성하고 자식 컴포넌트에 전달한다.
  4. 부모 컴포넌트는 자식 컴포넌트의 노출된 메소드를 호출한다.

// 1. forwardRef로 컴포넌트 감싸기
// ResultModal.jsx
import React, { forwardRef } from 'react';

const ResultModal = forwardRef((props, ref) => {
  // 컴포넌트 내용
});

export default ResultModal;

// 2. useImperativeHandle 훅 사용하기
// ResultModal.jsx
import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const ResultModal = forwardRef((props, ref) => {
  const { result, targetTime } = props;
  const dialogRef = useRef();

  useImperativeHandle(ref, () => ({
    open: () => {
      dialogRef.current.showModal();
    },
  }));

  return (
          <dialog ref={dialogRef}>
            {/* 모달 내용 */}
          </dialog>
  );
});

export default ResultModal;

// 3. 부모 컴포넌트에서 메소드 호출하기
// TimerChallenge.jsx
import React, { useRef, useEffect } from 'react';
import ResultModal from './ResultModal';

function TimerChallenge(props) {
  const resultModalRef = useRef();

  useEffect(() => {
    if (timerExpired) {
      resultModalRef.current.open();
    }
  }, [timerExpired]);

  return (
          <>
            {/* 기타 컴포넌트 */}
            <ResultModal ref={resultModalRef} result="lost" targetTime={targetTime} />
          </>
  );
}

export default TimerChallenge;

125. refs, portals / 추가 예시: Refs(참조)와 State(상태)를 사용해야 하는 경우

• 목표: TimerChallenge 컴포넌트를 개선하여 타이머를 성공적으로 멈췄을 때 모달(ResultModal)을 띄우고, 남은 시간을 표시하는 기능을 추가하고자 합니다.
• setTimeout에서 setInterval로 변경: 기존의 setTimeout으로는 남은 시간을 지속적으로 추적할 수 없으므로, setInterval을 사용하여 10밀리초마다 남은 시간을 업데이트합니다.
• 상태 관리:
  • 새로운 상태 변수 timeRemaining을 생성하여 남은 시간을 밀리초 단위로 저장합니다.
  • setTimeRemaining 함수를 사용하여 10밀리초마다 남은 시간을 감소시킵니다.
• 타이머의 활성화 조건:
  • timeRemaining이 0보다 크고 초기 값보다 작을 때 타이머가 활성화되었다고 판단합니다.
• 타이머 종료 처리:
  • 남은 시간이 0 이하가 되면 clearInterval을 통해 타이머를 중지하고, ResultModal을 띄웁니다.
  • 사용자가 수동으로 타이머를 멈출 때도 동일하게 모달을 띄웁니다.
• 주의사항:
  • 컴포넌트 함수 내에서 상태를 직접 업데이트할 때는 조건문을 사용하여 무한 루프를 방지해야 합니다.
  • clearInterval을 사용할 때는 useRef를 통해 참조를 저장하고 관리합니다.
• UI 업데이트:
  • 상태 변수와 조건문을 통해 버튼의 동작과 표시를 제어합니다.
  • 타이머의 상태에 따라 버튼의 이벤트 핸들러와 표시가 변경됩니다.

[타이머 시작 버튼 클릭]
          |
          v
[setInterval 설정]
          |
          v
[10ms마다 실행되는 함수]
          |
          v
[timeRemaining 상태 업데이트]
          |
          +------------------------------+
          |                              |
          v                              v
[timeRemaining > 0]                [timeRemaining <= 0]
          |                              |
          v                              v
[타이머 진행 중]                  [clearInterval 호출]
          |                              |
          v                              v
[UI 업데이트]                      [모달(ResultModal) 표시]
          |                              |
          v                              v
[타이머 중지 버튼 클릭 시]
          |
          v
[handleStop 함수 실행]
          |
          v
[clearInterval 호출]
          |
          v
[모달(ResultModal) 표시]

126. refs, portals / 컴포넌트 간의 State(상태) 공유

• 목표: 타이머 챌린지 앱에서 남은 시간을 정확히 모달(ResultModal)에 전달하여, 사용자가 승리했는지 패배했는지 판단하고, 그에 따라 적절한 메시지와 점수를 표시하려고 합니다.
• 문제점 식별 및 해결:
  • 문제점: 타이머가 만료되면 timeRemaining이 초기화되어 패배 조건이 제대로 적용되지 않는 문제가 발생했습니다.
  • 해결책:
    • 타이머 만료 시 timeRemaining을 초기화하지 않고, 새로운 handleReset 함수를 만들어 필요할 때만 초기화합니다.
    • handleReset 함수를 onReset 속성을 통해 모달에 전달하고, 모달에서 폼의 onSubmit 이벤트를 사용하여 호출합니다.
• 구현 내용:
  • 남은 시간 전달: remainingTime 속성을 통해 모달에 남은 시간을 전달합니다.
  • 게임 결과 판단:
    • userLost 변수를 생성하여 remainingTime <= 0일 때 패배로 판단합니다.
    • userLost 값에 따라 다른 메시지('당신이 졌습니다' 또는 점수)를 표시합니다.
  • 시간 포맷팅:
    • remainingTime을 초 단위로 변환하고 toFixed(2)를 사용하여 소수점 두 자리까지 표시합니다.
  • 이벤트 처리 및 상태 관리:
    • 모달에서 폼의 onSubmit 이벤트를 통해 handleReset 함수를 호출하여 타이머를 재설정합니다.
    • 사용자가 모달을 닫을 때 타이머와 상태가 초기화되어 새로운 게임을 시작할 수 있습니다.

[TimerChallenge 컴포넌트]
       |
       v
[타이머 시작 및 timeRemaining 상태 업데이트]
       |
       v
[타이머 종료 조건 검사]
       |
       +------------------------------+
       |                              |
       v                              v
[timeRemaining > 0]             [timeRemaining <= 0]
       |                              |
       v                              v
[사용자 중지 버튼 클릭]          [타이머 만료]
       |                              |
       v                              v
[ResultModal 컴포넌트 호출]      [ResultModal 컴포넌트 호출]
       |                              |
       v                              v
[remainingTime 속성 전달]        [remainingTime 속성 전달]
       |                              |
       v                              v
[모달에서 userLost 계산]          [모달에서 userLost 계산]
       |                              |
       v                              v
[성공 메시지 및 점수 표시]        [패배 메시지 표시]
       |                              |
       v                              v
[모달 내 폼 제출(onSubmit)]
       |
       v
[onReset 호출(handleReset)]
       |
       v
[timeRemaining 상태 초기화]
       |
       v
[새로운 게임 시작]

127. refs, portals / 데모 앱의 "결과 모달창" 개선

이번 시간에는 타이머 챌린지 앱의 ResultModal 컴포넌트를 개선하여 사용자의 점수와 성공 메시지를 표시했습니다. 점수는 남은 시간과 목표 시간을 기반으로 계산되며, 계산 공식은 다음과 같습니다:

Score = (1 - (remainingTime / (targetTime * 1000))) * 100

여기서 remainingTime은 밀리초 단위이고, targetTime은 초 단위이므로 targetTime에 1000을 곱해 단위를 맞췄습니다. 계산 순서를 보장하기 위해 괄호를 사용했고, 점수를 깔끔하게 표시하기 위해 반올림을 적용했습니다.

사용자가 패배하지 않은 경우(!userLost), 모달에 점수와 성공 메시지를 표시합니다. 남은 시간이 0에 가까울수록 더 높은 점수를 받게 되며, 점수는 0부터 100 사이의 값입니다. 이 방식은 5초 챌린지 등 다른 모든 타이머 챌린지에도 동일하게 적용됩니다.

변경 사항을 저장하고 테스트하여 점수 계산과 표시가 올바르게 동작하는지 확인했습니다. 이를 통해 사용자에게 더 나은 피드백과 게임 경험을 제공할 수 있게 되었습니다.

[사용자: 타이머 시작]
          |
          v
[타이머 작동 - 남은 시간 감소]
          |
          v
[사용자: 타이머 멈춤]
          |
          v
[남은 시간(remainingTime) 체크]
          |
          v
[패배 여부 확인: userLost = remainingTime <= 0]
          |
          +-----------------------------+
          |                             |
          v                             v
[사용자 승리 (!userLost)]         [사용자 패배 (userLost)]
          |                             |
          v                             v
[점수 계산]                       [패배 메시지 표시]
Score = (1 - (remainingTime / (targetTime * 1000))) * 100
          |                             |
          v                             v
[점수 반올림 및 표시]              [모달에 패배 메시지 표시]
          |                             |
          v                             v
[모달에 성공 메시지와 점수 표시]     |
          |                             |
          v                             v
[사용자: 모달 확인 및 닫기]
          |
          v
[타이머 및 상태 초기화]
          |
          v
[새로운 게임 시작 가능]

128. refs, portals / 모달을 ESC(Escape) 키로 닫기

<dialog>요소를 사용하면 웹사이트 방문자가 키보드의 ESC(Escape) 키를 눌러 열린 대화창을 닫을 수 있습니다.

현재, 이것은 버튼 클릭으로 대화상자를 닫는 것과 달리, onReset함수를 트리거하지 않습니다.

ESC 키로 대화창을 닫을 때 onReset이 트리거되도록 하려면 <dialog> 요소에 내장된 onClose 속성을 추가하고 그 값을 onReset속성에 바인딩해야 합니다.

다음과 같습니다:

<dialog ref={dialog} className="result-modal" onClose={onReset}
   ...
</dialog>

129. refs, portals / Portals(포탈) 소개 및 이해하기

React Portal의 특징과 사용 방법에 대해 알아보겠습니다. 기존에 ResultModal 컴포넌트는 TimerChallenge 컴포넌트의 JSX 코드 내에 렌더링되어, DOM 구조상 깊게 중첩되어 있었습니다. 이는 시각적으로는 문제가 없어 보이지만, 기술적으로는 접근성이나 스타일링에서 문제가 발생할 수 있습니다.

이를 해결하기 위해 React Portal을 사용하여 ResultModal 컴포넌트를 DOM 내의 다른 위치, 즉 루트에 가까운 div 요소(id="modal")에 렌더링하도록 변경했습니다. 이를 통해 모달과 같은 오버레이 요소를 DOM 트리의 최상위 수준에 배치하여 구조를 명확히 하고, 잠재적인 스타일 및 접근성 문제를 방지할 수 있습니다.

포털을 사용하기 위해 react-dom 라이브러리에서 createPortal 함수를 임포트하고, 렌더링할 JSX 코드를 createPortal로 감싸고 두 번째 인수로 대상 DOM 노드를 전달합니다. 대상 DOM 노드는 document.getElementById('modal')를 사용하여 선택합니다.

[React 컴포넌트 계층 구조]
      |
      v
[TimerChallenge 컴포넌트]
      |
      v
[ResultModal 컴포넌트 렌더링]
      |
      v
[createPortal로 ResultModal JSX 감싸기]
      |
      v
[ReactDOM.createPortal(    <ResultModal />,    document.getElementById('modal'))]
      |
      v
[DOM의 다른 위치에 ResultModal 렌더링]
(예: <div id="modal"></div>)
      |
      v
[사용자에게 모달 표시]

// ResultModal.tsx
import React from 'react';

interface ResultModalProps {
  // 필요한 props를 정의합니다.
  onClose: () => void;
}

const ResultModal: React.FC<ResultModalProps> = ({ onClose }) => {
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h2>모달 제목</h2>
        <p>모달 내용</p>
        <button onClick={onClose}>닫기</button>
      </div>
    </div>
  );
};

export default ResultModal;

// TimerChallenge.tsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import ResultModal from './ResultModal';

const TimerChallenge: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleModalClose = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <h1>타이머 챌린지</h1>
      {/* 타이머 관련 코드 */}
      <button onClick={() => setIsModalOpen(true)}>모달 열기</button>

      {isModalOpen &&
        ReactDOM.createPortal(
          <ResultModal onClose={handleModalClose} />,
          document.getElementById('modal') as HTMLElement
        )}
    </div>
  );
};

export default TimerChallenge;

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <div id="modal"></div> <!-- 모달을 렌더링할 대상 DOM 노드 -->
</body>
</html>

130. 프로젝트 관리 앱(컴포넌트, 상태, 참조 등 적용) / 모듈 소개 & 초기 프로젝트

리액트 프로젝트 관리 앱의 개발을 통해 지금까지 배운 React의 기본기와 고급 개념을 종합적으로 연습해 본다. 이 앱은 새 프로젝트를 생성하고, 프로젝트별로 할 일을 추가하며, 프로젝트와 할 일을 삭제할 수 있는 기능을 제공한다. 컴포넌트와 상태 관리를 활용하고, 참조(ref)와 포털(Portal) 등의 개념을 적용하여 앱을 구현한다. 스타일링을 위해 Tailwind CSS를 사용한다.

[사용자]
    |
    v
[새 프로젝트 생성] ---> [프로젝트 목록에 추가]
    |
    v
[프로젝트 선택]
    |
    v
[할 일 추가] ---> [프로젝트의 할 일 목록에 추가]
    |
    v
[할 일 삭제] <--- [프로젝트의 할 일 목록]
    |
    v
[프로젝트 삭제] ---> [프로젝트 목록에서 제거]

// App.tsx
import React from 'react';
import ProjectManager from './components/ProjectManager';

const App: React.FC = () => {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">프로젝트 관리 앱</h1>
      <ProjectManager />
    </div>
  );
};

export default App;

// components/ProjectManager.tsx
import React, { useState } from 'react';
import ProjectForm from './ProjectForm';
import ProjectList from './ProjectList';

interface Project {
  id: number;
  name: string;
}

const ProjectManager: React.FC = () => {
  const [projects, setProjects] = useState<Project[]>([]);

  const addProject = (name: string) => {
    const newProject: Project = {
      id: Date.now(),
      name,
    };
    setProjects([...projects, newProject]);
  };

  const deleteProject = (id: number) => {
    setProjects(projects.filter((project) => project.id !== id));
  };

  return (
    <div>
      <ProjectForm addProject={addProject} />
      <ProjectList projects={projects} deleteProject={deleteProject} />
    </div>
  );
};

export default ProjectManager;

// components/ProjectForm.tsx
import React, { useState } from 'react';

interface ProjectFormProps {
  addProject: (name: string) => void;
}

const ProjectForm: React.FC<ProjectFormProps> = ({ addProject }) => {
  const [projectName, setProjectName] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (projectName.trim()) {
      addProject(projectName.trim());
      setProjectName('');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="mb-4">
      <input
        type="text"
        value={projectName}
        onChange={(e) => setProjectName(e.target.value)}
        placeholder="프로젝트 이름"
        className="border p-2 mr-2"
      />
      <button type="submit" className="bg-blue-500 text-white p-2">
        프로젝트 추가
      </button>
    </form>
  );
};

export default ProjectForm;

// components/ProjectList.tsx
import React from 'react';
import TaskManager from './TaskManager';

interface Project {
  id: number;
  name: string;
}

interface ProjectListProps {
  projects: Project[];
  deleteProject: (id: number) => void;
}

const ProjectList: React.FC<ProjectListProps> = ({ projects, deleteProject }) => {
  return (
    <div>
      {projects.map((project) => (
        <div key={project.id} className="border p-2 mb-2">
          <h2 className="text-xl font-semibold">
            {project.name}
            <button
              onClick={() => deleteProject(project.id)}
              className="text-red-500 ml-4"
            >
              삭제
            </button>
          </h2>
          <TaskManager projectId={project.id} />
        </div>
      ))}
    </div>
  );
};

export default ProjectList;

// components/TaskManager.tsx
import React, { useState } from 'react';

interface Task {
  id: number;
  text: string;
}

interface TaskManagerProps {
  projectId: number;
}

const TaskManager: React.FC<TaskManagerProps> = () => {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [taskText, setTaskText] = useState('');

  const addTask = () => {
    if (taskText.trim()) {
      const newTask: Task = {
        id: Date.now(),
        text: taskText.trim(),
      };
      setTasks([...tasks, newTask]);
      setTaskText('');
    }
  };

  const deleteTask = (id: number) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div className="ml-4">
      <input
        type="text"
        value={taskText}
        onChange={(e) => setTaskText(e.target.value)}
        placeholder="할 일 내용"
        className="border p-1 mr-2"
      />
      <button onClick={addTask} className="bg-green-500 text-white p-1">
        할 일 추가
      </button>
      <ul className="mt-2">
        {tasks.map((task) => (
          <li key={task.id} className="flex justify-between">
            {task.text}
            <button
              onClick={() => deleteTask(task.id)}
              className="text-red-500"
            >
              삭제
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaskManager;

131. 프로젝트 관리 앱(컴포넌트, 상태, 참조 등 적용) / "프로젝트 사이드바" 컴포넌트 추가하기

React 프로젝트 관리 앱을 개발하면서 ProjectsSidebar 컴포넌트를 생성한다. 이 컴포넌트는 사용자에게 프로젝트 목록을 보여주고, 새로운 프로젝트를 추가할 수 있는 버튼을 제공한다. 컴포넌트는 다음과 같이 구성된다:

• ProjectsSidebar.jsx 파일을 components 폴더 내에 생성한다.
• ProjectsSidebar 함수형 컴포넌트를 정의하고, JSX 코드를 반환한다.
• <aside> 요소를 사용하여 사이드바 내용을 감싼다.
• <h2> 요소에 "당신의 프로젝트"라는 제목을 넣는다.
• 새로운 프로젝트를 추가하기 위한 <button> 요소를 생성하고, "+프로젝트 추가"라는 텍스트를 포함한다.
• App 컴포넌트에서 기존의 <h1> 요소를 제거하고, 대신 ProjectsSidebar 컴포넌트를 임포트하여 렌더링한다.
• 루트 요소를 <Fragment>에서 <main> 요소로 변경하여, 사이드바와 프로젝트 상세 내용을 감싼다.
• 변경 사항을 저장하고 브라우저에서 사이드바가 올바르게 표시되는지 확인한다.

이렇게 해서 기본적인 사이드바 구조를 완성하였고, 다음 단계에서는 스타일링을 추가하고 기능을 확장할 계획이다.

[App 컴포넌트]
      |
      v
[ProjectsSidebar 컴포넌트 렌더링]
      |
      v
<main>
  |
  +--<ProjectsSidebar />
      |
      v
    <aside>
      |
      +--<h2>당신의 프로젝트</h2>
      |
      +--<div>
            |
            +--<button>+프로젝트 추가</button>

// src/App.tsx
import React from 'react';
import ProjectsSidebar from './components/ProjectsSidebar';

const App: React.FC = () => {
  return (
    <main className="flex">
      <ProjectsSidebar />
      {/* 추가할 프로젝트의 상세 내용이 여기 들어갈 것입니다 */}
    </main>
  );
};

export default App;

// src/components/ProjectsSidebar.tsx
import React from 'react';

const ProjectsSidebar: React.FC = () => {
  return (
    <aside className="w-64 bg-gray-100 p-4">
      <h2 className="text-xl font-bold mb-4">당신의 프로젝트</h2>
      {/* 프로젝트 목록이 여기 들어갈 것입니다 */}
      <div>
        <button className="w-full bg-blue-500 text-white py-2 px-4 rounded">
          +프로젝트 추가
        </button>
      </div>
    </aside>
  );
};

export default ProjectsSidebar;

132. 프로젝트 관리 앱(컴포넌트, 상태, 참조 등 적용) / 테일윈드 CSS로 사이드바 & 버튼 스타일링하기

이번 시간에는 앱의 스타일링을 개선해 보겠습니다. App 컴포넌트에서 Tailwind CSS 클래스를 추가하여 화면 전체 높이를 차지하도록 설정하고, 상하 여백을 추가했습니다. ProjectsSidebar 컴포넌트의 aside 요소에 다양한 클래스를 적용하여 사이드바의 레이아웃과 디자인을 완성했습니다.

구체적으로는:

• 너비 설정: w-1/3 클래스로 사이드바의 너비를 부모 요소의 1/3로 설정하고, 큰 화면에서는 md:w-72로 고정된 너비를 적용했습니다.
• 패딩 추가: px-8과 py-16 클래스로 패딩을 추가하여 콘텐츠와 테두리 사이의 여백을 확보했습니다.
• 배경 및 텍스트 색상: bg-stone-900과 text-stone-50 클래스로 배경색과 텍스트 색상을 설정했습니다.
• 모서리 둥글게: rounded-r-xl 클래스로 사이드바의 오른쪽 모서리를 둥글게 만들었습니다.

H2 태그와 버튼에도 스타일을 적용했습니다:

• H2 태그: font-bold, uppercase 등을 사용하여 텍스트를 굵게 하고 대문자로 변환했습니다.
• 버튼: 패딩, 글자 크기, 색상, 호버 효과 등을 Tailwind CSS 클래스로 설정하여 시각적으로 매력적인 버튼을 만들었습니다.

이러한 스타일링을 통해 기본적인 사이드바와 버튼을 완성했습니다. 다음 단계로는 이 버튼을 클릭하면 새로운 창이 열려서 새로운 프로젝트의 상세 정보를 추가할 수 있는 컴포넌트를 구현해 보겠습니다.

// App.tsx
import React from 'react';
import ProjectsSidebar from './components/ProjectsSidebar';

const App: React.FC = () => {
  return (
          <div className="h-screen my-8">
            <main className="flex">
              <ProjectsSidebar />
              {/* 앞으로 추가할 프로젝트 상세 내용 */}
            </main>
          </div>
  );
};

export default App;

// components/ProjectsSidebar.tsx
import React from 'react';

const ProjectsSidebar: React.FC = () => {
  return (
          <aside className="w-1/3 md:w-72 px-8 py-16 bg-stone-900 text-stone-50 rounded-r-xl">
            <h2 className="mb-8 font-bold uppercase text-stone-400 md:text-2xl">
              당신의 프로젝트
            </h2>
            {/* 프로젝트 목록이 여기에 들어갈 예정 */}
            <button className="w-full px-2 py-1 md:px-4 md:py-2 text-xs md:text-base rounded-md bg-stone-700 text-stone-400 hover:bg-stone-600 hover:text-stone-100">
              +프로젝트 추가
            </button>
          </aside>
  );
};

export default ProjectsSidebar;

133. 프로젝트 관리 앱(컴포넌트, 상태, 참조 등 적용) / "새 프로젝트" 컴포넌트와 재사용 가능한 "입력" 컴포넌트 추가하기

새로운 프로젝트를 추가할 수 있는 NewProject 컴포넌트를 생성하였다. 이 컴포넌트에서는 프로젝트의 제목, 상세설명, 마감일을 입력할 수 있는 필드를 제공한다. 코드의 재사용성과 중복 제거를 위해 Input 컴포넌트를 별도로 생성하여 라벨과 입력 필드를 구성하였다.

Input 컴포넌트는 isTextarea 속성을 통해 <input> 또는 <textarea>를 조건부로 렌더링한다. 또한, 나머지 속성은 spread 연산자 ...를 사용하여 해당 요소에 전달된다.

App 컴포넌트에서는 NewProject 컴포넌트를 ProjectsSidebar 컴포넌트 옆에 배치하기 위해 flex 클래스를 사용하고, 요소 간 간격을 주기 위해 gap-8 클래스를 적용하였다.

현재는 스타일링이 적용되지 않았으며, 이후에 추가할 예정이다. 이렇게 함으로써 사이드바와 프로젝트 입력 폼이 화면에 나란히 표시되며, 사용자로부터 프로젝트 정보를 입력받을 수 있는 준비를 마쳤다.

[App 컴포넌트]
      |
      v
<main class="flex gap-8">
      |
      +-- [ProjectsSidebar 컴포넌트]
      |
      +-- [NewProject 컴포넌트]
            |
            v
      <div>
        |
        +-- [메뉴 요소]
        |     |
        |     +-- [취소 버튼]
        |     +-- [저장 버튼]
        |
        +-- [프로젝트 입력 디브]
              |
              +-- [Input 컴포넌트 (Title)]
              |     |
              |     +-- <label>Title</label>
              |     +-- <input ... />
              |
              +-- [Input 컴포넌트 (Description)]
              |     |
              |     +-- <label>Description</label>
              |     +-- <textarea ... />
              |
              +-- [Input 컴포넌트 (Due Date)]
                    |
                    +-- <label>Due Date</label>
                    +-- <input ... />

// components/Input.tsx
import React from 'react';

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  isTextarea?: boolean;
}

const Input: React.FC<InputProps> = ({ label, isTextarea, ...rest }) => {
  return (
          <p>
            <label>{label}</label>
            {isTextarea ? (
                    <textarea {...rest}></textarea>
            ) : (
                    <input {...rest} />
            )}
          </p>
  );
};

export default Input;

// components/NewProject.tsx
import React from 'react';
import Input from './Input';

const NewProject: React.FC = () => {
  return (
          <div>
            <menu>
              <button>취소</button>
              <button>저장</button>
            </menu>
            <div>
              <Input label="Title" />
              <Input label="Description" isTextarea />
              <Input label="Due Date" />
            </div>
          </div>
  );
};

export default NewProject;