[TIL] State & Props 특징 외

2022. 8. 3. 00:48·개념정리/React

 

state

  • 애플리케이션의 "상태"
  • 컴포넌트 내부에서 변할 수 있는 값

props

  • 외부로부터 전달받은 값
  • 컴포넌트의 속성(property)을 의미합니다. 이름이나 출생지처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다.
  • 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다.
  • 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.
  • props는 읽기 전용입니다. props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값입니다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체입니다. 함부로 변경되지 않아야 하기 때문입니다.

Fragments

Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
저작자표시 비영리 동일조건 (새창열림)
'개념정리/React' 카테고리의 다른 글
  • 번들링과 웹팩
  • [상태관리] Redux
  • [TIL] React 데이터 흐름
  • [React] SPA의 등장 배경과 장단점
imKion
imKion
Front-end Developer
  • imKion
    Kion
    imKion
  • 전체
    오늘
    어제
    • 분류 전체보기 (46)
      • 문제 해결 (6)
        • 리팩터링 (3)
      • 회고 (8)
      • 개념정리 (29)
        • JavaScript (10)
        • React (9)
        • Next.JS (2)
        • WEB (5)
        • CS 외 (2)
      • 알고리즘 (2)
        • 코플릿 (1)
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    typeScript
    frontend
    JavaScript
    REACT
    OOP
    코드스테이츠
    til
    프론트엔드
    react 18
    회고
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.2
imKion
[TIL] State & Props 특징 외
상단으로

티스토리툴바