React로 사고하기

 

전통적인 웹 개발 (HTML, CSS, JavaScript + jQuery)

 

기존의 웹 개발 방식→ HTML, CSS, JavaScript를 직접 사용해서 웹사이트를 제작

특히 jQuery 같은 라이브러리를 사용해서 DOM을 조작하는 방식이 일반적

 

• HTML, CSS, JS가 분리된 상태로 개발됨
• DOM을 직접 조작
• 페이지 새로고침이 많음 (서버 렌더링 중심)
• 복잡한 UI에서는 유지보수가 어려움
• 재사용성 부족함

 

동작 원리

1. 서버 → 클라이언트(브라우저)로 HTML 파일 전송
2. 브라우저 :  HTML을 렌더링하고, CSS를 적용
3. JavaScript가 실행되면서 동적인 UI 추가 (이벤트 리스너, 애니메이션 등)
4. 특정 이벤트 발생 시 document.querySelector() 같은 방법으로 DOM을 직접 수정
5. 새로운 데이터를 불러오려면 보통 페이지 전체를 새로고침하거나 AJAX(XMLHttpRequest, fetchAPI)를 사용해야 함

 

 

React로 UI를 개발하는 방식

 

컴포넌트 기반 개발을 강조

데이터를 효율적으로 관리, UI를 재사용할 수 있도록 구조화

 

 

React에서 UI를 설계하는 5단계 과정

 

 

Step 1: UI를 컴포넌트 계층으로 쪼개기

 

UI를 개발하기 전에 먼저 UI를 컴포넌트 단위로 나누는 과정이 필요

 

컴포넌트 분리 기준

• 단일 책임 원칙(SRP) → 하나의 컴포넌트는 하나의 역할만 담당
• 재사용성 → 반복되는 UI 요소를 컴포넌트로 분리
• 데이터 흐름 고려 → 부모-자식 관계를 고려하여 적절히 구조화

 

https://ko.react.dev/learn/thinking-in-react

 

예제 UI에서 컴포넌트를 나누기

 

• FilterableProductTable (회색 - 최상위 컨테이너) : 예시 전체를 포괄
  • SearchBar (파란색 - 검색 입력 필드) : 사용자의 입력을 받음
  • ProductTable (라벤더색 - 상품 목록 테이블) : 데이터 리스트를 보여주고, 사용자의 입력을 기반으로 필터링
    • ProductCategoryRow (초록색 - 카테고리 헤더) : 각 카테고리의 헤더를 보여줌
    • ProductRow (노란색 - 각 상품 정보) : 각각의 제품에 해당하는 행을 보여줌

 

Step 2: 정적인 UI 구현

 

부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 props 개념을 활용

상태(state)없이 UI를 렌더링하는 정적 버전을 구현

 

→ 예제에서 ProductTable은 products 리스트를 받아 렌더링하는 역할을 수행

*이 단계에서는 useState를 사용하지 않음. 단순히 컴포넌트 계층 구조를 구현하는 것이 목적.

 

Step 3: 최소한의 state 결정

 

UI를 동적으로 만들기 위해 변경되는 데이터를 state로 관리해야 함

모든 데이터를 state로 저장하면 비효율적이므로 최소한의 state만 저장

state를 구조화하는 데 가장 중요한 원칙 : 중복배제원칙(Don't Repeat Yourself)

 

State가 되어야 하는 데이터 체크리스트

1. 시간이 지나면서 변경되는 값인가?

2. 부모 컴포넌트로부터 props로 전달될 수 없는가?

3. 다른 state나 props를 이용해 계산할 수 없는가?

 

 

예제에서 

 

state가 필요한 항목:

• filterText (사용자가 입력한 검색어 - 시간이 지남에 따라 변하고, 다른 요소로부터 계산될 수 없음)
• inStockOnly (재고 있는 제품만 표시하는 체크박스 값 - 시간에 따라 바뀌고 다른 요소로부터 계산될 수 없음)

 

state가 필요하지 않은 항목

• products (제품의 원본 목록 - 변하지 않는 데이터이므로 props로 전달)
• 필터링된 제품 목록 (원본 데이터, 검색어, 체크박스의 값에 따라 계산 가능)

 

Step 4: State 위치 결정

 

React는 단방향 데이터 흐름(one-way data flow)을 사용

→ 부모 컴포넌트가 state를 관리하고, 자식 컴포넌트로 전달하는 구조를 가짐

 

state를 저장할 위치 결정하는 방법

1. 해당 state를 필요로 하는 모든 컴포넌트를 찾는다.

2. 가장 가까운 공통 부모 컴포넌트를 찾는다.

3. 해당 부모 컴포넌트에서 state를 관리하고, props로 전달한다.

 

 

예제에서는 FilterableProductTable이 state를 관리

function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState('');
  const [inStockOnly, setInStockOnly] = useState(false);
  
  return (
    <div>
      <SearchBar 
        filterText={filterText} 
        inStockOnly={inStockOnly} />
      <ProductTable 
        products={products}
        filterText={filterText}
        inStockOnly={inStockOnly} />
    </div>
  );
}

filterText와 inStockOnly를 SearchBar와 ProductTable에 전달하여 UI에 반영할 수 있도록 함

 

Step 5: 역 데이터 흐름 (이벤트 핸들링 추가)

 

React에서 state는 부모 컴포넌트에서 관리하므로, 자식 컴포넌트에서 직접 변경할 수 없음

자식 컴포넌트에서 부모 state를 변경하려면 이벤트 핸들러를 props로 전달

 

SearchBar에서 입력값 변경 시 부모 state 변경하는 방법

1. 부모(FilterableProductTable)에서 state 변경 함수를 만든다.

2. 자식(SearchBar)에게 이벤트 핸들러를 props로 전달한다.

3. 자식에서 onChange 이벤트를 통해 부모의 state를 업데이트한다.

 

 

최종 구현 코드

function SearchBar({ filterText, inStockOnly, onFilterTextChange, onInStockOnlyChange }) {
  return (
    <form>
      <input 
        type="text" 
        value={filterText} 
        placeholder="Search..." 
        onChange={(e) => onFilterTextChange(e.target.value)} />
      <label>
        <input 
          type="checkbox" 
          checked={inStockOnly} 
          onChange={(e) => onInStockOnlyChange(e.target.checked)} />
        {' '}
        Only show products in stock
      </label>
    </form>
  );
}

부모에서 핸들러 전달

function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState('');
  const [inStockOnly, setInStockOnly] = useState(false);

  return (
    <div>
      <SearchBar 
        filterText={filterText} 
        inStockOnly={inStockOnly} 
        onFilterTextChange={setFilterText} 
        onInStockOnlyChange={setInStockOnly} />
      <ProductTable 
        products={products} 
        filterText={filterText}
        inStockOnly={inStockOnly} />
    </div>
  );
}

사용자가 입력하면 상태가 변경되고, UI가 자동 업데이트됨

 

---

 

 

 

React로 사고하기 - React

React로 사고하기 – React