티스토리 뷰

JavaScript/React

Component

미짱~ 2023. 7. 15. 04:18

Commponent?

마크업(HTML)으로 뿌릴 수 있는 JavaScript 함수다. 라고 공식 사이트에 정의되어있다. 

쉽게 말하자면, JavaScript 함수에 마크업을 작성 및 UI 관련된 코드 작성하고 그 해당 컴포넌트를 씀으로써 마크업  부분을브라우저에  그려주며 상호작용을 도와주는 역할이다.

 

그럼 누군간 말할 것이다. 기존 자바스크립트로도 가능하지 않은가?

 

기존 자바스크립트를 이용한다면 html 파일과 js 파일을 따로 관리하며 코드 짤 때 파일을 번갈아 보면서 짜야하며

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>memo</title>
  </head>
  <body>
    <form id="memo-form">
      <label for="memo-input">메모</label>
      <input type="text" placeholder="여기에 메모를 입력해주세요" id="memo-input" required />
      <button>add</button>
    </form>
    <ul></ul>
    <script src="app.js"></script>
  </body>
</html>
function displayMemo(memo) {
  const ulEl = document.querySelector('ul');

  const liEl = document.createElement('li');
  liEl.innerText = `id:[${memo.id}] ${memo.content}`;

  const editBtnEl = document.createElement('button');
  editBtnEl.innerText = 'edit';
  editBtnEl.dataset.id = memo.id;
  editBtnEl.addEventListener('click', handleClick);
  const deleteBtnEl = document.createElement('button');
  deleteBtnEl.innerText = 'delete';
  deleteBtnEl.dataset.id = memo.id;
  deleteBtnEl.addEventListener('click', deleteMemo);

  liEl.appendChild(editBtnEl);
  liEl.appendChild(deleteBtnEl);
  ulEl.appendChild(liEl);
}

getElementById, getElementsByClassName, getElementsByTagName, querySelector, innerHTML을 사용해야할 것이다. 

 

 

=> React에서는 JSX라는 파일이 존재하는데 js 파일 안에서 html 작성이 가능하다. 조금 더 간편하게 코드를 짤 수 있다.

import React from 'react'
import { CardListProps } from '../../interface/todo'
import Card from '../card/Card'
import * as S from './style'

export default function CardList({ todos, onDelete, onUpdate }: CardListProps) {
  return (
    <S.CardListWrap style={{ width: '100%' }}>
      <S.CardList>
        {todos.map((todo) => (
          <Card todo={todo} key={todo.id} onDelete={onDelete} onUpdate={onUpdate} />
        ))}
      </S.CardList>
    </S.CardListWrap>
  )
}

docs에서 요약하자 하면

  • React를 사용하면 앱의 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있습니다.
  • React 앱에서 모든 UI는 컴포넌트입니다.
  • React 컴포넌트는 다음 몇 가지를 제외하고는 일반적인 JavaScript 함수입니다.
    1. 컴포넌트의 이름은 항상 대문자로 시작합니다.
    2. JSX 마크업을 반환합니다.

 

 

참고 사이트 React.dev

 

첫 번째 컴포넌트 – React

The library for web and native user interfaces

ko.react.dev

 

 Today I Learn...

  • 나의 생각: 바닐라 자바스크립트가 나쁘다고는 생각하지 않는다. 단지 리액트가 편리하게 만들어주는 라이브러리일뿐...  리액트를 찬양글이 아니다.  
  • 느낀 점: 문서를 보면서 배웠던 것들을 다시 복습하니 상기가 되었다.
  • 실제로 코드 쓸 때 든 생각: 프로젝트나 실제로 코드 작성할 때 컴포넌트의 중요성 재사용 목적이라는 걸 느꼈는데 docs에서도 얘기한 점...  docs의 소중함을 느낀다.
  • 나에게 바라는 점: 과연... 블로그 다시 꾸준히 쓸 수 있길 바라며...

'JavaScript > React' 카테고리의 다른 글

컴포넌트 import 및 export 하기  (1) 2023.07.15
Props, State  (0) 2023.03.15
React  (0) 2023.03.06
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함