이번 포스팅에서는 목록 렌더링과 컴포넌트의 순수성에 대해 다루어 보겠습니다. 이번 포스팅도 단순히 컴포넌트의 순수성에 대한 내용을 다루지는 않습니다. 컴포넌트 포스팅에서 다루었던 내용을 바탕으로 컴포넌트 순수성에 대해서 다루어 보겠습니다. 컴포넌트의 단일 책임! 컴포넌트 안에서 변수, 배열들의 변화 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()에 전달해야 합니다. 저번 포스팅..

이번 포스팅에서는 React를 시작해 보겠습니다. React를 시작하기 위해 먼저 몇 가지 프로그램을 설치하고 작업 환경을 구성해야 합니다. 1. 기본 프로그램 설치 Node js 먼저 Node js 공식 사이트에서 LTS버전을 설치해 주세요. 설치 후 node.js Setup파일을 실행시켜 설치를 진행합니다. 설치 후 node -v 명령어를 통해 설치 여부를 확인할 수 있습니다. npm node를 설치했다면 npm이 자동으로 설치됩니다. 터미널에서 npm -v 명령어를 통해 확인할 수 있습니다. React 어플리케이션 설치 CRA로 React어플리케이션을 설치합니다. 다음 두 가지 명령어를 통해 React 어플리케이션을 설치할합니다. 파일 이름을 대문자로 할 경우 오류가 발생하니 소문자로 이름을 지어주..

최근 웹개발의 트렌드는 빠르게 변화하고 있습니다. 그만큼 여러 개발 도구들이 등장하고 발전하고 있는데요, React도 이러한 개발 도구들 중 하나입니다. 어떤 개발 도구나 프레임워크라도 "왜 쓰는지" 혹은 "그 툴의 장점이 무엇인지?"를 알고 쓰는 것이 중요합니다. 이번에는 React를 공부하기에 앞서 왜 React를 써야 하는지 React가 가지는 특징을 중심으로 알아보려고 합니다. 1. React란? 페이스북(현재 메타)에서 개발한 Javascript UI 라이브러리를 말합니다. 2. React의 등장 배경 2000년대 초 Web 2.0과 SPA(Single Page Application)의 등장으로 사용자가 웹페이지에서 정보를 주고받으며 상호작용할 수 있게 되었습니다. 이에따라 많은 웹서비스들이 등..

React 톺아보기 시리즈에서는 React 공식 문서를 바탕으로 기초부터 심화까지의 내용을 정리하도록 하겠습니다. 프로그래밍 공부는 프로젝트에 실전적으로 적용하면서 배우는 Project Based Learning이 정말 중요합니다. 따라서 공식 문서의 틱 택 토, To Do List를 만들어 보면서 React의 주요 내용들을 적용해 보도록 하겠습니다. 참고 자료들 React 공식 문서 리액트의 공식 사이트에 있는 문서입니다. React의 기본부터 심화까지 다룹니다. CRA CRA는 페이스북에서 만든 공식 React 개발용 Boilerplate입니다. 간단히 말해서 React 개발 환경 구축 툴입니다. React를 공부하면서 CRA를 굉장히 많이 사용할 텐데, 이 문서는 CRA에 대한 설명 뿐만 아니라 C..