props

클래스 컴포넌트import React from 'react'// props 타입 선언interface Props { required?: boolean text: string}// state 타입 선언interface State { count: number isLimited?: boolean}class Component extends React.Component { private constructor(props : Props) { super(props) this.state = { count: 0, isLimited: false, } } render() { const { props: {required, t..

💡 결론 : React에서 key를 사용하여 엘리먼트 혹은 컴포넌트의 변화를 감지해 효율적인 DOM 사용을 위해서 1. 자식에 대한 재귀적 처리 DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. Duke Villanova // 변경 Connecticut // 자식요소 추가 Duke Villanova 위와 같은 경우 React는 Duke와 Villanova 종속 트리를 그대로 유지하는 대신 모든 자식을 변경 (다시 렌더링)한다. React 입장에서 컴포넌트를 반복해서 렌더링 하는 일은 매우 비효율적임! Keys 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 캐치할 수..

Props Drilling 1. Props 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용(단방향 데이터 흐름) 자식 컴포넌트에서 프로퍼티는 수정할 수 없음 (읽기 전용) 2. Props Drilling props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({ content }) { return ( I am the first component; | ); } function S..