본문 바로가기

전체 글101

생명 주기 React 클래스 컴포넌트의 생명주기는 컴포넌트의 생성부터 소멸까지 여러 단계를 거치며, 각 단계에 따라 특정한 메서드가 호출됩니다. 이러한 메서드들을 생명주기 메서드라고 하며, 컴포넌트의 생명주기를 효과적으로 관리할 수 있게 해줍니다. 1. 마운팅(Mounting) 2024. 2. 20.
Component React에서 컴포넌트는 UI의 독립적이고 재사용 가능한 부분을 구성하는 핵심 단위입니다 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다 Props: 컴포넌트에 전달되는 입력 값으로, 부모 컴포넌트로부터 받은 데이터입니다. Props는 읽기 전용이며, 컴포넌트 내부에서 수정할 수 없습니다. State: 컴포넌트의 상태를 나타내는 데이터로, 컴포넌트 내부에서 관리됩니다. 상태가 변경되면, 컴포넌트는 자동으로 다시 렌더링됩니다. 생명주기 메서드: 클래스 컴포넌트에서 사용할 수 있는 메서드로, 컴포넌트의 생성부터 소멸까지 다양한 시점에 특정 작업을 수행할 수 있게 해줍니다. 예를 들어, componentDidMount는 컴포넌트가 마운트된 후 실행되는 메서드입니다. 1. 함수형 컴포넌트(Functional.. 2024. 2. 20.
Whimsical Diagrams 다이아그램을 전문적으로 만들어주는 gpts이다. 아래와 같이 요구했다 "REACT에서 REACT-DOM과 DOM의 연관성을 다이아그램을 통해 설명해주세요" 답변은 아래와 같으며 굉장히 만족스런 다이아그램을 생성해주었다. 앞으로 자주 사용할 듯 싶다. 심지어 이미지를 클릭하니 아래의 url로 이동하여 수정이 가능했다. https://whimsical.com/react-react-dom-and-dom-interaction-Ee4T5QzuAN6TcNDqi9pDDG?ref=chatgpt 2024. 2. 20.
기본 개념 Props : Component에 전달하는 Data로 Component 구성을 가능하게 해주며, 부모-자식 Component 간 Data를 연결해준다. State : Component 내부의 Data를 뜻한다. Context : 앱을 구성하는 전체 Component의 Data를 뜻한다. Component : 위 기능들의 집합인 Function이다. DOM : 웹 사이트를 열 때, 화면에 표시되는 내용을 마크업 언어인 HTML을 통해 표현한다는 것이다 VDOM(Virtual DOM) : 상태 변경은 VDOM에 먼저 적용 그후 DOM에 적용. 하지만 VDOM을 업데이트한다고 해서 반드시 실제 DOM의 업데이트가 트리거 되는 것은 아님. 1. 컴포넌트 기반 아키텍처 React는 UI를 독립적이고 재사용 가능한.. 2024. 2. 20.
React-DOM React-DOM은 가상 DOM의 변화를 실제 DOM에 반영하기 위한 라이브러리입니다. 변화가 필요한 부분만을 효율적으로 업데이트함으로써, 성능을 최적화합니다. 코드를 수정할 때 REACT-DOM의 흐름을 간단하게 소개하면 아래와 같습니다. REACT -> Virtual DOM -> React DOM-> DOM ->UI React의 핵심적인 작동 메커니즘은 가상 DOM 재조정(Reconciliation) 과정 DOM과의 효율적인 상호작용 에 있습니다. 1. React Component Tree React 애플리케이션은 컴포넌트로 이루어진 트리 구조입니다. 이 트리는 애플리케이션의 구조를 정의합니다. 2. 가상 DOM (React-DOM과 같은 뜻 아님.) 가상 DOM은 실제 DOM을 추상화한 메모리 내의.. 2024. 2. 20.
템플릿 요청 (Canva) 아래와 같이 요청했습니다. 신입 개발자의 웹사이트에 어울리는 로고를 만들어줘. 이 로고에는 신입개발자가 개발한 앱과 웹사이트에 대한 코드를 공유하고 ai 서비스의 정보들을 알려주는 곳이야. 그리고 이름은 united prompt야 그에 따른 결과물들은 아래와 같습니다. 로고보단 템플릿을 만들어주는 것 같습니다 좋았던 점은 gpt에서 사진을 클릭하면 canva로 이동되어 이 템플릿을 수정할 수 있었습니다. https://www.canva.com/design/play?template=EAF809ozMac 2024. 2. 20.

티스토리툴바