이번 포스팅에서는 목록 렌더링과 컴포넌트의 순수성에 대해 다루어 보겠습니다. 이번 포스팅도 단순히 컴포넌트의 순수성에 대한 내용을 다루지는 않습니다. 컴포넌트 포스팅에서 다루었던 내용을 바탕으로 컴포넌트 순수성에 대해서 다루어 보겠습니다. 컴포넌트의 단일 책임! 컴포넌트 안에서 변수, 배열들의 변화 x 불변성 유지! 이후에 배울 이벤트 핸들러, 상태 관리에 대한 개념 언급! let todolists = [{ id: 1, //JSX에서 key로 사용됨. name: "예외 처리하기", done: true }, { id: 2, name: "계층 구조 설계하기", done: true }, { id: 3, name: "UI 구현하기", done: true }, { id:4, name: "사용자와 상호 작용을 변수..

이번 포스팅의 제목은 컴포넌트에 props를 전달하기 입니다. 하지만 이번 글은 제목처럼 단순히 props를 전달하는 것이 아닙니다. 컴포넌트에 props를 전달하는 과정은 복잡하기 때문입니다. 이제부터는 그동안 다루었던 컴포넌트의 정의, JSX의 규칙, 컴포넌트 렌더링 과정을 모두 알고 있어야 합니다. 이를 이용하여 컴포넌트에 props를 전달하는 과정을 알아보도록 하겠습니다. 또한 글의 길이와 가독성을 위해 전체 코드는 접은글로 작성할 것입니다. 필요하면 펼쳐보면 됩니다. 앞의 예제에서는 App.js에서 TodoTempmet 컴포넌트, TodoHead 컴포넌트, TodoMain 컴포넌트를 모두 관리했습니다. 이렇게 하나의 ..따라서 먼저 파일부터 나누어 보겠습니다. 1. props란? 먼저 props..

이번 포스팅에서는 React의 핵심 개념인 컴포넌트에 대해서 다루어 보겠습니다. 이제부터는 본격적으로 To Do List를 만들면서 진행하도록 하겠습니다. 소스코드는 To Do List의 오픈소스 프로젝트 사이트를 참고하였습니다. 1.컴포넌트(Component)란? 컴포넌트는 앱의 재사용가능한 작은 UI 조각입니다. To Do List를 예로 들어보면 위의 검은색, 분홍색, 보라색, 파란색 박스들이 모두 컴포넌트입니다. 위의 박스들 말고도 버튼, 글자들도 모두 컴포넌트에 해당됩니다. 이처럼 컴포넌트는 사용자가 정의하기 나름입니다. 2. 컴포넌트 렌더링 컴포넌트 정의하기 컴포넌트는 상호작용하는 마크업을 반환하는 Javascript 함수 형태입니다. 컴포넌트 안에 마크업과 기능이 모두 들어있죠. 먼저 Hel..

이번 포스팅에서는 JSX에 대해 다루겠습니다. 1. JSX란? JSX란 JavaScript XML의 약자로 Javascript 확장 문법입니다. React 개발 환경을 구축할 때 설치된 App.js, index.js파일을 보면 코드가 다음의 형태입니다. //App.js //import 부분 import React from 'react'; import logo from './logo.svg'; import './App.css'; //main 부분 function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; HTML파일에서 사용하는 "태그"들과 Javascript에서 사용하는 "function..

이번 포스팅에서는 React의 기본적인 동작인 엘리먼트 렌더링에 대해서 다루겠습니다. 1. 엘리먼트란? React의 엘리먼트란 "React 애플리캐이션을 구성하는 블록"입니다. const element = Hello World; 엘리먼트는 위의 코드처럼 화면에 보이는 것들을 기술하며, 한 번 생성된 이후에는 자식이나 속성을 변경할 수 없습니다. 2. 엘리먼트 렌더링 먼저 DOM이란 Document Object Model의 약자로 웹의 문서 객체 모델입니다. 페이지를 구성하는 모든 엘리먼트들은 React DOM에서 관리합니다. 엘리먼트를 렌더링하기 위해서는 DOM 엘리먼트를 ReactDom.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 합니다. 저번 포스팅..