mangocoder

리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있는지 알아내기위해 사용합니다. 예를 들어 유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 수도 있습니다 key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다. key가 있다면 변화를 조금 더 빠르게 알아낼 수 있습니다. import React from "react"; const IterationSample = () => { const names = ['눈사람' , '얼음' , '눈' , '바람']; const nameList = names.map(name => {name}); return {nameList} } export default Iterati..

JSX란? 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼습니다. 작성한 코드는 나중에 코드가 번들링되면서 babel-loader를 사용하여 자바스크립트로 변환합니다. JSX는 리액트용이기 때문에 공식 자바스크립트 문법은 아닙니다. ex) var a = ( Awesome React ) var a = React.createElement( "div", null, React.createElement( "h1", null, "Awesome", React.createElement( "b", null, "React" ) ) ); JSX 장점! #보기 쉽고 익숙하다 #오류 검사 #활용도 if문 대신 조건부 연산자 JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없습니다. 하지만 조건에 따라 다른 ..

컴포넌트란? 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위이다. 해당 화면에 사용한 컴포넌트는 총 4가지 입니다. TodoTemplate 컴포넌트 =>역할 : 화면의 중아에 있는 사각형 레이아웃의 역할 (전체적인 틀을 잡아주는 컴포넌트) TodoInput 컴포넌트 역할 : 화면에서 검정색 영역입니다. (새로운 항목을 추가할 수 있는 컴포넌트) TodoList 컴포넌트 (할 일 항복을 여러 개 보여주는 컴포넌트) TodoItem 컴포넌트 (List에 각 항목을 보여 주기 위한 컴포넌트) #컴포넌트를 선언하는 방식은 두 가지입니다. 함수형 컴포넌트 import React from 'react'; import './App.css'; function App()..

1. 초기 렌더링 어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다 (render함수) render함수란? html 형식의 문자열을 받환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 개게를 반환한다. 컴포넌트 내부에 또 다른 컴포넌트들이 들어갈 수 도있고 이때 render 함수를 실행하면 내부에 있는 컴포넌트들도 렌더링한다. 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업(markup)을 만들고, 우리가 정하는 실제 페이지의 DOM 요소안에 주입한다. 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시..