component6 React - 상태 끌어올리기 (Lifting State up) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 상태 끌어올리기 (Lifting State up) 에 대해서 알아보도록 하겠습니다. 유사한 방법으로는 Sharing State Between Components, 컴포넌트 간 상태 공유 라는 방법도 존재합니다. 이에 대해서는 가볍게 개념과 기본 동작형태만 알아보도록 하겠습니다. 이에 대해서 각각 알아보도록 하겠습니다. ============ HTML 삽입 미리보기할 수 없는 소스 ============ HTML 삽입 미리보기할 수 없는 소스 먼저 아래의 그림을 통해, 각각의 Component 의 구조가 어떻게 이루어지는지를 살펴보겠습니다. 이 개념도를 이전 포스팅에서도 잠시 다룬 적이 있습니다. React 에서는 기본적으로 데이터 흐름(Data Flow) .. 2023. 3. 6. React - Form 사용하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 HTML 에서 사용할 수 밖에 없지만, React 에서는 동작이 다르게 이루어지는 Form Element 에 대해 알아보도록 하겠습니다. 이번 포스팅은 다소 난해할 수 있기 때문에, 최대한 풀어서 작성해보도록 하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 먼저 이를 이해하기 위해서는 Component 의 개념으로 접근해야 합니다. 기존의 HTML 에서의 Form Element 는, "제어(Controller)", "비제어(unController)" Component 로 분류할 수 있습니다. 여기서 말하는 제어와 비제어의 차이는, 제어의 경우 Form Element 의 처리를.. 2023. 3. 6. React - 생명주기(Life Cycle) 및 State 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 생명주기(Life Cycle), 그리고 State 에 대해서 알아보도록 하겠습니다. React 의 기초사항으로 이 포스팅은 아마도 총 12개의 주제로 모두 세분화하여 업데이트를 할 예정입니다. 그럼 시작해보도록 하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 먼저 이전 포스팅에서 사용한 시계를 React 에서 구현한 코드를 가지고 그대로 사용을 해보도록 하겠습니다. 이전 포스팅, Element 단위 이해하기 포스팅에서 다루었던 코드를 그대로 활용할 예정입니다. 이전 포스팅에서 UI 를 업데이트 하는 방법은, 오직 "root.render()" 를 이용하여 출력하는 것을 배웠고,.. 2023. 2. 27. React - Component & Props 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 가장 중요하게 다루게 될 Component & Props 에 대해서 알아보도록 하겠습니다. React 를 다루기 위해서 가장 중요한 개념이 될 두가지를 알아보도록 하겠습니다. ========= HTML 삽입 미리보기할 수 없는 소스 ========= HTML 삽입 미리보기할 수 없는 소스 Component 는 크게 "Function Component", "Class Component" 두가지가 존재합니다. 즉 함수형 컴포넌트, 클래스 컴포넌트라고 불리우게 되는데, 이는 이미 JavaScript 에서 우리가 작성을 해보았던 개념입니다. 예시를 간단하게 살펴보도록 하겠습니다. 1) Function Component const Text = (pr.. 2023. 2. 24. React - Element 단위 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 화면을 표시하는 가장 작은 단위라고 하는 Element 에 대해 알아보도록 하겠습니다. Component 를 넘어가기 이전에, Element 를 가볍게 이해하고 넘어가는 페이지로 이해해주시면 좋겠습니다. ========= HTML 삽입 미리보기할 수 없는 소스 ========= HTML 삽입 미리보기할 수 없는 소스 React 공식 문서에서도 Element 는 "React App 의 가장 작은 단위" 라고 정의하고 있습니다. 즉 React 에서 코드를 작성할 때, 코드의 가장 작은 구성요소가 Element 라는 의미를 갖습니다. 기존의 JavaScript 에서 사용한 "DOM" 객체의 Element 와는 달리 React Element 는 ".. 2023. 2. 23. React - React 기본사항 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 이제 NodeJS 를 지나 React 의 기초를 알아보는 포스팅을 작성해보도록하겠습니다. 실제 Front-End 개발자들이 가장 많이 사용하는 Stack이기도 한 React, 어떠한 특징을 가지고 있는지 자세히 살펴보도록 하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 React 는 Facebook, Instagram 으로 우리에게 친숙한 회사인 Meta 에서 개발한 JavaScript Library 입니다. React 는 JavaScript 기반에서 동작하는 Library 로서, 몇가지 특징이 존재합니다. 그 특징을 간략하게 정리해보도록 하겠습니다. HTML 삽입 미리보기할.. 2023. 2. 22. 이전 1 다음
