[TIL 2023.03.07] React의 State와 Props / <li>와 <ul> / Semantic HTML

지식 보충을 위해 조금씩 정리를 해보자! #8

---

1. React의 State와 Props

예전에 정리했던 내용: [React 2] State & Props 간단정리

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.


리액트 공식 문서 - 컴포넌트 State

• state와 props는 둘 다 일반 JS 객체이고, 리액트는 state 혹은 props가 변할때 렌더링이 발생한다.
• props는 read-only 데이터이기 때문에 직접적으로 변화하지 않는 값이지만, 상위 컴포넌트에서 state가 변화할 때 하위 컴포넌트에 새롭게 props가 전달된다. 이때 이 props는 기존에 있던 props를 다시 받기도, 새로 받기도 한다.
• 그렇기 때문에 렌더링 최적화를 위해 같은 props가 내려올땐 렌더링이 발생하지 않도록 처리해야한다. (useMemo)

✅ 그래서 State란?

state는 화면에 렌더링 되는 요소의 값을 저장하는데 사용되는 변수와 같은 존재라고 볼 수 있다. 값을 저장하거나 변경할 수 있는 객체로 이벤트와 같이 연결되어 사용된다. 리액트의 함수형 컴포넌트에서 state를 사용하기 위해 useState라는 Hook을 사용한다.

useState 사용방식

const [mode, setMode] = useState(false)

console.log(mode) // false

<button onClick={() => setMode(true)} />
// 버튼 클릭 시 mode의 값은 false -> true로 변경된다.

useState를 사용할 경우 ES6 문법인 비구조화 할당 (구조분해) 문법을 주로 사용하여, state의 값을 나타내는 변수명(mode)와 state의 값을 변경하는 함수명(setMode)를 지정해서 사용한다.

이때 mode를 출력하면 초기값인 false가 표시되고, 버튼 onClick 이벤트에 연결되어있는 함수가 실행되면 setMode 함수를 사용해서 mode의 값을 변경할 수 있다.

다만 주의할 점은 setState로 변경되는 값은 비동기로 처리된다는 것!

setState가 비동기로 동작하는 이유

리액트는 불필요한 렌더링 횟수를 줄이기 위해 16ms 단위로 batch update를 진행하고, 그사이 변경된 상태값을 모아서 이전의 엘리먼트 트리와 변경된 state가 적용된 엘리먼트 트리를 비교하는 작업(reconciliation)을 거쳐 최종적으로 변경된 부분만 Real DOM에 적용시킨다.

state도 결국 객체이기 때문에, 같은 키값을 가진 경우라면 가장 마지막 실행값으로 덮어씌워진다.
따라서 setState 호출 직후 새로운 값이 바로 state에 적용된다고 예상하면 안된다.

function AsyncSetState() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 콘솔에 출력되는 값은 이전 state의 값이다 (+1이 되기 전 상태)
  };

  return (
    <>
     <div>현재 값 {count}</div> // handleClick이 실행됐을 때, 화면에 출력되는 count 값은 최신값이다.
     <button onClick={handleClick}>count+</button>
    </>
  );
}

만약 setState를 동기적으로 사용하고싶다면, setState의 인자로 함수를 넣어주면 된다.

setState가 비동기적으로 작동하지만, 렌더링 전에 모두 batch되는 것이 보장되고, 실행 순서대로 처리됨이 보장된다. 인자로 넘겨주는 함수는 큐에 저장이 되어 순서대로 실행이 되기 때문이다.

  const handleClick = () => {
    setState((prevState) => prevState + 1);
    setState((prevState) => prevState + 1);
    setState((prevState) => prevState + 1);
  };

이렇게될 경우, handleClick이 실행될 때 state가 +1 이 아닌 +3으로 출력된다.
넣어준 함수의 인자로 이전 state객체가 전달이 되고, 이는 가장 최신값임이 보장된다. 큐에 저장된 함수가 순서대로 실행되면서 반환하는 값이 다음 함수의 prevState로 들어가는 방식이기 때문.

• 예시 출처: zuzokim.log - React - setState가 비동기인 이유

✅ 그래서 Props란?

• 프로퍼티, props(properties의 줄임말) 라고 한다.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용하기 때문에 단방향 데이터 흐름을 갖는다.
  • 기본적으로 단방향이지만, 물려받은 props가 setState 함수일 경우, 하위 컴포넌트에서 상위 컴포넌트의 state를 변경할 수 있다.
  • 예시:

function Upper(){
	const [mode, setMode] = useState(false)
    // 상위 컴포넌트에서 관리하는 state
  
    return(
      <div>
      	<Lower setMode={setMode} />
		// 하위 컴포넌트에 setMode 함수를 props로 전달
      </div>
    )
}

function Lower({setMode}){
// 상위 컴포넌트로부터 props로 함수를 전달 받음
  
  const handleClick = () => setMode(true) 
  // 해당 함수 실행 시, props로 받은 setState 함수를 이용해서 state 변경
  // 이 함수가 실행되면 상위 컴포넌트의 state가 false => true로 변한다.
 
  
  return(
    <div>
      <button onClick={handleClick} />
	  // 버튼 클릭 시 handleClick 함수 실행
    </div>
  )
}

• 하위(자식) 컴포넌트측에서 props는 읽기 전용이기 때문에, 부모로부터 받아온 프로퍼티는 수정할 수 없다.
• 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호 { } 를 사용 한다.
• props로 내려주는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없다.
• props는 읽기 전용이기 때문에 props 값을 받고 가공하고 싶다면 새로운 변수를 생성하고 props 값을 복제해서 사용한다.

---

2. < li >와 < ul >

✅ < li > 요소가 < ul > 요소의 자식이어야만 하는 이유

li 요소는 아이템의 리스트를 의미한다. li 요소의 부모 요소가 ol, ul, 혹은 menu 요소일 경우, li 요소들은 전부 부모 요소의 아이템 리스트로 지정된다. 만약 부모 요소가 따로 존재하지 않는다면 각각의 li 요소들은 개별적 요소가 되기 때문에 HTML의 요소가 제대로 사용되지 않았다는 것을 의미한다!

HTML의 요소들은 각 요소들이 의미하는 뜻이 매우 뚜렷한데, 각 요소들을 제대로 사용하는 것이 HTML에선 굉장히 중요한 일이고, 제대로 사용하는 것을 Semantic HTML 이라고 한다.

---

3. Semantic HTML

예전에 정리했던 내용: [HTML, CSS, JavaScript] 기본 개념 정리

시맨틱(Semantic) HTML을 직역하면 "의미론적 HTML"이다. 의미론적이란 언어에서 단어와 구절의 의미를 아는 것을 뜻한다. HTML에서 semantic element는 해당 element의 의미를 브라우저와 개발자 모두에게 알려주는 것이다.

✅ HTML의 목적

HTML은 인터넷 브라우저가 알아들을 수 있는 가장 기본적인 컴퓨터 언어다.
기능 구현보단 브라우저와 소통하는 방식이 주기 때문에, 웹브라우저가 해석할 수 있는 정보를 담고 있다.

HTML에서 사용하는 태그들은 단순히 특정 글을 꾸며주는게 아니라 태그 자체가 브라우저가 해석할 수 있는 중요한 정보다. 어디서부터 어디가 제목인지, 본문인지, 혹은 브라우저엔 표시할 필요는 없지만 검색엔진이 분류할때 필요한 정보들인지를 구분할 수 있게 하는 것이 바로 HTML의 태그인 것.

만약 Semantic Element가 없다면 HTML 코드에서 어떤 것이 중요하고 어떤 것이 중요하지 않은 지 확인할 수 없게된다. 이는 해당 웹사이트의 인덱싱을 어렵게 만들어 SEO와 같은 검색 엔진의 웹사이트 정보 수집을 막게된다.

✅ HTML 태그 일부 정리

• 출처:
  • TCP School - html tags

Tag	Description
<!--...-->	주석으로 코멘트를 달 때 사용한다.
<!DOCTYPE>	다큐먼트의 타입을 지정할 때 사용한다.
<a>	하이퍼링크를 삽입할 때 사용한다.
<article>	아티클 (의미 있는 글)을 표기할 때 사용한다.
<aside>	페이지 컨텐츠와 연관은 있지만 분리될 수 있는 컨텐츠를 지정할때 사용한다.
<audio>	컨텐츠 내부에 삽입된 오디오 컨텐츠를 의미한다.
<b>	굵은 글씨 (bold체) 로 작성하기 위해 사용한다.
<blockquote>	다른 출처로부터 인용된 블록을 정의할 때 사용하며, 이렇게 인용된 블록을 브라우저는 보통 들여쓰기를 사용하여 표현한다.
<body>	문서의 텍스트, 하이퍼링크, 이미지와 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용하고, 문서 당 단 한개의 body만 존재한다.
<button>	클릭할 수 있는 버튼을 정의할 때 사용한다.
<caption>	테이블의 캡션(caption, 테이블이나 사진, 삽화 등에 붙는 설명)을 정의할 때 사용한다.
<cite>	책이나 음악, 영화, 예술 작품 등과 같은 창작물의 제목을 정의할 때 사용한다.
<code>	컴퓨터 코드(code)의 일부분을 나타낼 때 사용한다.
<col>	<colgroup> 요소에 속하는 각 열(column)의 속성을 정의할 때 사용한다.
<dialog>	대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의할 때 사용한다.
<div>	HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용한다.
<em>	강조된 텍스트(emphasized text)를 표현할 때 사용한다.
<embed>	외부 애플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너(container)를 정의할 때 사용한다.
<footer>	문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용한다.
<form>	사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용한다.
<h1> ~ <h6>	HTML 문서에서 제목(heading)을 정의할 때 사용한다.
<head>	해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의할 때 사용한다.
<hr>	콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용한다.
<html>	HTML 문서의 루트 요소(root element)를 정의할 때 사용한다.
<i>	이탤릭체로 표현되며, 전문용어나 다른 언어의 관용구, 문어체, 서양 문헌에 나오는 배 이름 등을 나타낼 때 사용한다.
<img>	HTML 문서에서 이미지(image)를 정의할 때 사용한다.
<input>	사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용한다.
<label>	사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용한다.
<li>	HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용한다.
<link>	해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용한다.
<nav>	다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다.
<ol>	순서가 있는 HTML 리스트(list)를 정의할 때 사용한다.
<option>	옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 하나의 옵션을 정의할 때 사용한다.
<p>	문단(paragraph)을 정의할 때 사용한다.
<q>	짧은 인용구(short quotation)를 정의할 때 사용한다.
<script>	자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용한다.
<section>	HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용한다.
<select>	옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의할 때 사용한다.
<source>	<audio> 요소나 <video> 요소, <picture> 요소에서 사용할 수 있는 다중 미디어 자원(multiple media resources)을 정의할 때 사용한다.
<span>	HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용한다.
<table>	데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의할 때 사용한다.
<tbody>	HTML 테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용한다.
<td>	HTML 테이블에서 하나의 데이터 셀(data cell)을 정의할 때 사용한다.
<textarea>	사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용한다.
<tfoot>	HTML 테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용한다.
<th>	HTML 테이블에서 제목이 되는 헤더 셀(header cell)을 정의할 때 사용한다.
<tr>	테이블에서 셀들로 이루어진 하나의 행(row)을 정의할 때 사용한다.
<ul>	순서가 없는 HTML 리스트(list)를 정의할 때 사용한다.

---

출처:

• 리액트 공식문서 - 컴포넌트 State
• lim1313.log - React props 리렌더링
• 나만을 위한 블로그 - [React] State란?
• zuzokim.log - React - setState가 비동기인 이유
• HTML Living Standard
• 빠리의 택시 운전사 - [HTML] 시맨틱(Semantic) HTML을 짜보자
• w3schools - HTML Element Reference
• TCP School - html tags