[개발 공부 69일차] React 공식 문서 Study | Markup 뜻

< 목차 >
1. Markup(마크업)
2. Describing the UI  |  Passing Props to a Component
3. Describing the UI  |  Conditional Rendering
4. 금일 소감

 

 

 

 

프로그래밍은 법학처럼 나오는 단어, 단어마다의 의미를 정확히 모르면 이해가 잘 안 가는 듯하다. 같은 내용을 보더라도 저번에 읽었을 땐 분명히 이해했다고 생각했는데, 나중에 다시 보면 정말 기초적인 개념의 의미조차 모르는 경우가 많다.

 

---

 

 

 

오늘도 위 사진처럼 공식 문서를 읽다가 나온 개념인 markup이 정확히 어떤 의미인지 모르겠어서 해당 개념을 알아보았다.

 

 

1. Markup(마크업) 뜻

 

: 텍스트를 정의하고 표현하기 위해 고안된 것

 

하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML)은 마크업 언어의 예다.
HTML 파일과 같은 텍스트 파일 내에서, 요소는 콘텐츠의 해당 부분의 목적을 설명하는 태그를 사용하여 '표시'된다.

 

# 마크업 언어의 종류

 

표현적 마크업 (Presentational Markup)

: WYSIWYG(what you see it is what you get)을 사용하는 전통적인 워드 프로세싱 시스템에서 사용된다. 사용자, 편집자, 작성자가 사람일 경우에는 숨겨져 있다.

순차적 마크업 (Procedural Markup)

: 텍스트와 결합되어 프로그램에 텍스트 처리에 대한 지침을 제공한다. 이 텍스트는 작성자에 의해 수정될 수 있다.

설명적 마크업 (Descriptive Markup)

: 프로그램이 문서를 처리하는 방법에 대해 문서 항목에 레이블을 지정한다.

예) HTML <td>은 HTML 테이블의 셀을 정의한다.

 

 

[Reference]

1. MDN 공식 문서 - https://developer.mozilla.org/ko/docs/Glossary/Markup
2. GitHub Blog - [JS] JS의 삽입 방식과 삽입 위치 https://manbalboy.github.io/front/javascript-position.html

 

 

2. Describing the UI  |  Passing Props to a Component

0. TL;DR

1. prop을 읽으려면 함수 Avatar({ person, size }) 구조분해 구문 사용하고, 누락되거나 정의되지 않은 prop에 사용 시엔 size = 100과 같은 기본값 지정 가능
2. 여러 prop을 넘겨야 할 경우, <아바타 {...props} /> JSX 스프레드 구문을 사용 가능하지만 과한 사용은 지양
3. <Card><Avatar /></Card>와 같이 중첩된 JSX는 Card 컴포넌트의 하위 prop으로 나타남

 

1. 컴포넌트에 prop 전달하는 법 (핵심만)

- React에서 props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터와 이벤트 핸들러를 전달하는 데 사용된다.
- JSX 태그에 HTML 속성과 유사하게 props를 추가하여 정의하며, 컴포넌트 내에서 직접 접근하거나 구조 분해를 통해 특정 값을 추출 가능
- Props는 컴포넌트의 재사용성을 높이고 데이터 흐름의 단방향성을 유지하여 예측 가능성과 신뢰성을 강화한다.
- prop은 읽기 전용 스냅샷으로, 렌더링할 때마다 새로운 버전의 prop을 받는다.
- prop을 변경할 수 없다. 상호작용이 필요한 경우 State를 설정해야 한다.

 

2. prop 기본값 설정하기

function Avatar({ person, size = 100 }) {
  // ...
}

기본값은 크기 *프로퍼티가 없거나 size={정의되지 않음}을 전달한 경우에만 사용된다. 그러나 size={null} 또는 size={0}을 전달하면 기본값이 사용되지 않는다. (falsy한(거짓으로 평가되는) 값은 기본값으로 쳐주지 않는 듯)

* Property(프로퍼티): JSX 태그에 전달하는 정보

 

3. JSX 스프레드 구문으로 prop 전달하기

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

위와 같이 여러 개의 prop을 가져와야 할 때는 아래와 같이 스프레드 구문으로 모두 가져올 수 있다.

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

 

이렇게 하면 프로필의 모든 prop이 각각의 이름을 나열하지 않고 Avatar로 전달된다.

스프레드 구문을 절제해서 사용하는 것이 좋고, 웬만하면 동료가 코드를 이해하기 쉽도록 어떤 걸 넘기는지 명확히 하는 게 더 좋을 듯하다.

 

 

 

3. Describing the UI  |  Conditional Rendering

 

0. TL;DR

1. if /else문, 삼항연산자(? :), 논리 AND(&&) 연산자를 사용하여 조건부로 JSX 표현식 반환 가능
2. JSX에서 {cond ? <A /> : <B />}는 “if cond, 렌더링 <A />, 그렇지 않으면 <B />”를 의미한다.
3. JSX에서 {cond && <A />}는 “if cond, 렌더링 <A />, 그렇지 않으면 아무것도 렌더링하지 않음”을 의미한다.

 

1. 조건부 렌더링

컴포넌트는 여러 조건에 따라 다른 것을 표시해야 하는 경우가 많다. React에서는 if 문, &&, 삼항 연산자와 같은 자바스크립트 구문을 사용하여 JSX를 조건부로 렌더링할 수 있다.

2. [방법1] if/else 문

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

 

3. 조건부 null로 아무것도 반환하지 않기

어떤 상황에서는 아무것도 렌더링하고 싶지 않을 때가 있다.

예를 들어, 패킹된 항목을 전혀 표시하고 싶지 않다고 가정해 보자. 컴포넌트는 무언가를 반환해야만 할 때, 이 경우 null을 반환하면 된다.

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

4. [방법2] 삼항연산자( ? : )

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

 

 

위 코드 대신

 

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

 

위 코드처럼 삼항연산자를 사용해서 더 코드를 간결하고 깔끔하게 작성할 수 있다.

 

5. [방법3] 논리 AND(&&) 연산자

React 컴포넌트 내에서 조건이 참일 때 일부 JSX를 렌더링하거나 그렇지 않으면 아무것도 렌더링하지 않으려 할 때 자주 사용한다. &&를 사용하면 isPacked가 참일 때만 조건부로 체크 표시를 렌더링할 수 있다.

return (
  <li className="item">
    {name} {isPacked && '✔'}
  </li>
);

 

isPacked이면 (&&) 체크 표시를 렌더링하고, 그렇지 않으면 아무것도 렌더링하지 않는다.

&& 표현식은 왼쪽(조건)이 참이면 오른쪽의 값을 반환한다. 그러나 조건이 거짓이면 전체 표현식이 거짓이 된다. React는 false를 null이나 정의되지 않은 것과 마찬가지로 JSX 트리에서 "hole"으로 간주하고 그 자리에 아무것도 렌더링하지 않는다.

 

🚨 &&의 왼쪽에 숫자를 넣지 말자!

조건을 테스트하기 위해 자바스크립트는 왼쪽을 자동으로 boolean으로 변환한다. 그러나 왼쪽이 0이면 전체 표현식이 해당 값(0)을 가져오고 React는 아무것도 없는 대신 0을 렌더링한다.

예를 들어, 흔히 실수하는 것은

 

messageCount && <p>새 메시지</p>

 

와 같은 코드를 작성하는 것이다. messageCount가 0일 때 아무것도 렌더링하지 않는다고 생각하기 쉽지만, 실제로는 0 자체를 렌더링한다. 이 문제를 해결하려면 아래 코드처럼 왼쪽을 boolean으로 만들면 된다.

 

messageCount > 0 && <p>새 메시지</p>.

 

 

 

4. 금일 소감

React 공식 문서를 읽는 스터디를 시작한 지 8일만에 한 챕터가 끝났다.

 

React 과정을 수료하며 들은 강의도, 나름 찾아본 자료도 많다고 생각했는데도 공식 문서에서 생소한 표현을 발견하곤 한다. 오늘 정리한 마크업처럼 생소한 표현이나 내가 이해하고 있는 or 알고 있는 개념이 맞는지 아리송한 표현과 개념은 따로 알아보며 '역시 공식 문서를 꼼꼼히 보며 공부하는 건 또 다른, 필수적인 부분이구나'를 깨달았다.

 

조금 더 욕심을 내서 이제 6일 내에 한 챕터를 모두 읽는 정도로 진도를 나가려고 한다. 팍팍 나가야 공식 문서를 빨리 다 읽을 것 같기 때문이다. 사실 캠프 때의 집중력이라면 하루 내에도 다 읽었겠지만 지금은 이해도가 그때보다 나은 대신, 나의 의지만으로 공부를 진행하다 보니 약간 해이한 느낌이다. 정신 차려서 팍팍 진도 나가야지!!!!!!! 파이팅 파이팅!