[🍎코딩애플 강의요약]React에서 props를 응용한 상세페이지 만들기 📄

동적 UI를 활용한 상세페이지 구현 🧩

오늘의 목표 🎯

• 클릭한 글의 제목이 모달창에 표시되게 하기
• 0번 글 클릭 → 0번 글제목 표시
• 1번 글 클릭 → 1번 글제목 표시

동적 UI 제작 3단계 📝

1. HTML/CSS로 미리 디자인하기 🎨

• 모달창은 이미 디자인되어 있으므로 패스 ✅

2. 현재 UI 상태를 state로 만들기 💾

let [title, setTitle] = useState(0);

• 모달창에 표시할 글 번호를 state로 관리
• 숫자형 state로 현재 보여줄 글의 인덱스 저장

3. state에 따라 UI 표시 방법 작성하기 🔄

function Modal(props) {
  return (
    <div className="modal">
      <h4>{ props.글제목[props.title] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

• props.글제목[title]로 현재 선택된 인덱스의 글제목 표시
• state 값이 바뀌면 해당 인덱스의 글제목이 자동으로 표시됨

클릭 이벤트 연결하기 🖱️

기본 버전 (반복문 없이) 🔰

function App() {
  let [title, setTitle] = useState(0);
  return (
    <div>
      <button onClick={()=>{ setTitle(0) }}> 0번글 </button>
      <button onClick={()=>{ setTitle(1) }}> 1번글 </button>
      <button onClick={()=>{ setTitle(2) }}> 2번글 </button>
      <Modal 글제목={글제목} title={title} />
    </div>
  )
}

• 각 버튼 클릭 시 해당 인덱스로 state 변경
• state가 변경되면 모달창의 내용도 자동 업데이트

map 함수 활용 버전 🔁

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [title, setTitle] = useState(0);
  return (
    <div>
      {
        글제목.map(function(a, i) {
          return (
            <div className="list" key={i}>
              <h4 onClick={()=>{ setTitle(i) }}>{ 글제목[i] }</h4>
              <p>2월 18일 발행</p>
            </div>
          )
        })
      }
      <Modal 글제목={글제목} title={title} />
    </div>
  )
}

• map 함수 내에서 각 항목 클릭 시 인덱스 전달
• onClick={()=>{ setTitle(i) }}로 클릭한 글의 인덱스로 state 업데이트

최종 구현 코드 🏁

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [title, setTitle] = useState(0);
  let [modal, setModal] = useState(false);
  
  return (
    <div>
      {
        글제목.map(function(a, i) {
          return (
            <div className="list" key={i}>
              <h4 onClick={()=>{ setModal(true); setTitle(i); }}>{ 글제목[i] }</h4>
              <p>2월 18일 발행</p>
            </div>
          )
        })
      }
      
      {
        modal === true 
        ? <Modal 글제목={글제목} title={title} /> 
        : null
      }
    </div>
  )
}

function Modal(props) {
  return (
    <div className="modal">
      <h4>{ props.글제목[props.title] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

• 모달 표시 여부와 현재 선택된 글 번호를 동시에 관리
• 글 클릭 시 모달 표시 및 선택된 글 번호 업데이트

강의 내용 검토 🔍

1. state 위치에 대한 원칙 설명: 강의에서는 "state를 사용하는 컴포넌트 중 최고 부모에 만들어야 한다"는 중요한 원칙을 설명했으나, 이것이 React의 "상태 끌어올리기(lifting state up)" 개념임을 명시하지 않았습니다. 📤

2. 이벤트 핸들링 최적화 부족: 클릭 이벤트에서 두 개의 state를 순차적으로 변경하는 방식(setModal(true); setTitle(i))을 사용했는데, 이는 React의 렌더링 최적화 관점에서 더 나은 방법이 있을 수 있습니다. 🔄

3. 조건부 렌더링 방식: 모달 표시를 위해 삼항 연산자를 사용했지만, && 연산자를 사용한 더 간결한 방식도 소개할 수 있었습니다. 🔀

추가 정보 및 팁 💡

컴포넌트 구조 최적화 🏗️

// 글 목록을 별도 컴포넌트로 분리
function BlogPost({글제목, index, onClick}) {
  return (
    <div className="list">
      <h4 onClick={onClick}>{글제목}</h4>
      <p>2월 18일 발행</p>
    </div>
  );
}

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [title, setTitle] = useState(0);
  let [modal, setModal] = useState(false);
  
  return (
    <div>
      {글제목.map((제목, i) => (
        <BlogPost 
          key={i} 
          글제목={제목} 
          index={i} 
          onClick={() => { 
            setModal(true); 
            setTitle(i); 
          }} 
        />
      ))}
      
      {modal && <Modal 글제목={글제목} title={title} />}
    </div>
  );
}

• 컴포넌트를 더 작은 단위로 분리하여 재사용성과 가독성 향상 🔍
• && 연산자를 사용한 더 간결한 조건부 렌더링 적용 ✅

useCallback을 활용한 이벤트 핸들러 최적화 🚀

import { useState, useCallback } from 'react';

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [title, setTitle] = useState(0);
  let [modal, setModal] = useState(false);
  
  // 클릭 이벤트 핸들러 최적화
  const handleTitleClick = useCallback((i) => {
    setModal(true);
    setTitle(i);
  }, []);
  
  return (
    <div>
      {글제목.map((제목, i) => (
        <div className="list" key={i}>
          <h4 onClick={() => handleTitleClick(i)}>{제목}</h4>
          <p>2월 18일 발행</p>
        </div>
      ))}
      
      {modal && <Modal 글제목={글제목} title={title} />}
    </div>
  );
}

• useCallback을 사용하여 불필요한 함수 재생성 방지 🔄
• 성능 최적화에 도움이 되며 특히 컴포넌트가 자주 리렌더링될 때 유용 ⚡

Context API를 활용한 대안 🌐

import { createContext, useState, useContext } from 'react';

// Context 생성
const BlogContext = createContext();

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [title, setTitle] = useState(0);
  let [modal, setModal] = useState(false);
  
  return (
    <BlogContext.Provider value={{ 글제목, title, setTitle, modal, setModal }}>
      <div>
        {글제목.map((제목, i) => (
          <div className="list" key={i}>
            <h4 onClick={() => { 
              setModal(true); 
              setTitle(i); 
            }}>{제목}</h4>
            <p>2월 18일 발행</p>
          </div>
        ))}
        
        {modal && <ModalWithContext />}
      </div>
    </BlogContext.Provider>
  );
}

function ModalWithContext() {
  const { 글제목, title } = useContext(BlogContext);
  
  return (
    <div className="modal">
      <h4>{글제목[title]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

• Context API를 사용하면 props 전달 없이도 여러 컴포넌트에서 state 공유 가능 🔄
• 컴포넌트 트리가 깊어질 때 props drilling 문제 해결에 유용 🌳

---

JavaScript && 연산자에 대한 설명

&&는 논리 AND 연산자로, 두 가지 주요 용도가 있음.

1️⃣ 기본 논리 연산 (Boolean)

true && true    // true
true && false   // false
false && true   // false
false && false  // false

2️⃣ 단축 평가 (Short-circuit Evaluation)

핵심: 왼쪽이 false면 오른쪽을 실행하지 않음

let a = 5;
let b = 10;
a > 10 && console.log("실행됨");     // 출력 안됨 (a > 10이 false)
a < 10 && console.log("실행됨");     // "실행됨" 출력 (a < 10이 true)

3️⃣ React에서의 조건부 렌더링 ⭐

가장 많이 사용되는 패턴:

function App() {
  let [모달열림, 모달열림변경] = useState(false);
  
  return (
    <div>
      <button onClick={() => 모달열림변경(true)}>모달 열기</button>
      
      {/* 모달열림이 true일 때만 Modal 컴포넌트 렌더링 */}
      {모달열림 && <Modal></Modal>}
    </div>
  );
}

🔍 동작 원리

{모달열림 && <Modal></Modal>}

경우 1: 모달열림이 true일 때

• true && <Modal></Modal> → <Modal></Modal> 반환 (컴포넌트 렌더링)

경우 2: 모달열림이 false일 때

• false && <Modal></Modal> → false 반환 (아무것도 렌더링 안됨)

📝 실용적인 예시들

// 로그인 상태에 따른 렌더링
{로그인됨 && <div>환영합니다!</div>}

// 배열에 데이터가 있을 때만 렌더링
{데이터.length > 0 && <List data={데이터} />}

// 에러가 있을 때만 에러 메시지 표시
{에러 && <div className="error">{에러}</div>}

⚠️ 주의사항

// 숫자 0은 falsy이므로 주의!
{items.length && <List />}  // items.length가 0이면 0이 화면에 출력됨

// 해결방법
{items.length > 0 && <List />}  // 명시적으로 boolean 만들기

React에서 &&는 "조건이 참일 때만 렌더링하고 싶다"는 상황에서 가장 유용함!