느리지만 꾸준히, 코딩

PropsReact에서 설명하는 Props“props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다.리액트에서 props를 속성을 나타내는 데이터라고 표현한다.Props는 read-only 이다.Props를 전달해보자Props를 수정해보자.해당 코드를 실행하면 멋지게분명 let name = "John"; 수정 가능한 let으로 선언 했지만, 자식 컴포넌트(객체)에서 수정접근시 read only라 수정할 수 없다는 에러가 발생한다.😒 왜 그럴까?이유는 ReactElement 를 생성할때 props와 element 를 fre..

Virtual DOM은 상태 객체다.가상돔은 가상이다.document 객체가 아니기 때문에 가상이다.가상돔은 가상이 아니다.가상돔은 리액트가 상태변화를 감지하기 위해 만든 진짜 객체이다.DOM 뜻DOM은 “Document Object Model”이다.가상 DOM이란?가상 DOM은 원본 DOM의 가벼운 복제본을 메모리에 유지하고, 변경 사항을 이 복제본에 먼저 적용한 다음, 실제 DOM과 비교하여 필요한 부분만 업데이트하는 방식으로 동작합니다. 이를 통해 불필요한 실제 DOM 조작 작업을 최소화하고 성능을 개선할 수 있습니다.결국 DOM을 객체화 시킴으로써, 변경감지에 대한 최적화를 시킬수 있고 그로인해 불필요한 리렌더링이 감소해서 성능향상이 발생한다고 볼수있을것 같다. 구조화된 형태 개발을 진행하기 때문..

Composition : 합성의미 : 둘 이상의 것을 합쳐서 하나를 이룸.왜 사용할까?React 컴포넌트의 재사용성을 높여이기 위해.반복되는 컴포넌트 예시import React from 'react';// 재사용 가능한 컴포넌트 정의export const CompositionFlexLayer = () => { return ( 0 );}export const CompositionFlexLayer1 = () => { return ( 1 );}export const CompositionFlexLayer2 = () => { return ( 2 ..

함수형 컴포넌트선언하는 방법들여러 방법중에 arrow function와named function declaration 두가지가 많이 사용되어지는 듯하다.// arrow functionexport const FunctionComponent1 = () => { return ( FunctionComponent 1 )}// named function declarationexport function FunctionComponent2() { return ( FunctionComponent 2 )} Props를 전달하는 방식props를 매개변수로 받아와서 사용하는 방식import React from 'react';// 1. 기본적인 방식: props를 통해 값 받아오기c..