리액트 기본 배우기 -합성과 상속-

1. 합성(composition) 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 여기서 A라는 컴포넌트와 B라는 컴포넌트가 반복적으로 나타남 이 페이지 자체도 하나의 리액트 컴포넌트 그래서 이 페이지는 컴포넌트 A와 컴포넌트 B를 합쳐서 페이지 컴포넌트를 만든 것이기 때문에 합성 컴포넌트를 사용했다고 볼 수 있다. 리액트로 개발을 하다보면 이처럼 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 일이 많다 합성이라고 무작정 그냥 컴포넌트들을 붙이는 것이 아니고 어떻게 조합할 것인가에 대한 고민이 필요하며 이에 따라 합성의 사용기법이 나뉜다 2. containment 하위 컴포넌트를 포함하는 형태의 합성 방법 사이드바나 다이얼로그같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 15.
• textsms

리액트 기본 배우기 -state를 공유하는 방법-

1. shared state 말 그대로 공유된 state 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용한다 shared state는 어떤 컴포넌트의 state에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우 가장 위에 있는 컴포넌트는 부모 컴포넌트이고, 아래 화살표로 연결된 2개의 컴포넌트는 자식 컴포넌트 부모 컴포넌트는 value라는 값을 가지고 있다. 왼쪽 아래에 있는 컴포넌트 A는 값에 2를 곱해서 표시하고, 오른쪽 아래의 B는 값에 3을 곱해서 표시한다. 이런 경우에 자식 컴포넌트들이 각각 값을 갖고 있을 필요는 없다. 그냥 부모 컴포넌트의 state의 값에 각각 2와 3을 곱해서 표시하면 그만이다 위 그림도 마찬가지로 3개의 컴포넌트가 있다 ..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 14.
• textsms

리액트 기본 배우기 -컴포넌트에 대하여-

1. 컴포넌트 기반의 구조 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들 수 있다 에어비앤비 웹사이트 화면을 캡쳐하고 컴포넌트를 간단히 표시한 것이다. A, B로 표시된 부분이 리액트 컴포넌트이다. 이러한 컴포넌트를 여러 번 반복적으로 사용해서 하나의 페이지를 구성하고 있다. 이처럼 리액트는 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다. 이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양이 줄어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있다. 2. 리액트 컴포넌트..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 10.
• textsms