React 완벽가이드 Session3

모듈 소개

Module Content

React Core Syntax

Working with Component

Working with Data

컴포넌트란 무엇인가? 왜 리액트는 컴포넌트의 전부라고 하는가?

모든 종류의 웹 프로그래밍은 컴포넌트로 나눌 수 있다.

 

왜 컴포넌트를 쓰는가?

코드의 재사용성, 우려사항들과의 분리

 

리액트 코드는 "선언적 방식"으로 작성되었습니다!

컴포넌트는 어떻게 작성하는가?

HTML, CSS, Javascript를 결합하는 것이 컴포넌트이다.

 

React & Component

실제 웹페이지에서 어떤 요소가 추가되거나, 삭제되고, 업데이트되어야하는지

해결하는 것

최종상태와 최종상황에서 어떤 상태가 사용되어야하는지 정의하면된다.

 

선언형

어떻게 해야하는지 보다 무엇과 같은지 설명하는 프로그램을 선언형 프로그램이라고 한다.

무엇을 보여줄지에 집중할 수 있다.

코드가 간결해진다.

 

새로운 리액트 프로젝트 생성하기

개발서버에서 미리보기 위해서 node.js를 설치한다.

 

표준 리액트 프로젝트 분석하기

index.js

index.js는 처음으로 실행되는 파일이다.

react-dom이라는 파일을 React-dom이 임포트한다.

react, react-dom은 리액트 라이브러리를 형성한다.

 

ReactDOM.render(<App></App>, document.getElementById('root'));

react-dom 패키지는 몇몇 react-dom 객체를 내보내고 이 index.js파일에서 그것들을 임포트한다. 임포트 한 다음 메소드를 호출한다.

두 번쨰 매겨변수는 기본 자바스크립트인 DOM API라고 불리는 것이다. 전역문서 객체로 브라우저 사이트에 있는 자바스크립트에 자바스크립트를 조합하는 방식이다.

App은 컴포넌트이다.

 

JSX 소개

JSX

자바스크립트 XML을 의미한다.

 

리액트 작동 방식

컴포넌트는 기본적으로 자체 html 요소일 뿐이다.

기존의 자바스크립트는 명령적 작동방식으로 정확하게 지시하고 있다.

리액트를 사용하면 최종상태만 정의하면 된다.

 

 

첫 번째 사용자 지정 컴포넌트 만들기

컴포넌트 트리 짓기

맨 위에 있는 컴포넌트만이 리액트 돔 렌더의 지시로 html페이지에 직접 렌더링된다.

다른 컴포넌트들은 이 지침으로 랜더링되지는 않고 컴포넌트의 html 코드안에 있는 보통의 html 요소들을 사용해서 렌더링된다.

 

                             <App>

<Header/>                                <Tasks/>

 

리액트 프로그램에서 이름을 만들 떄

대문자로 시작해야하고 안에 여러 단어가 있으면 중간에 있는 단어는 대문자로 시작해야한다.

파일 이름을 보면 어떤 로직, HTML 파일이 안에 있을지 알 수 있다.

 

컴포넌트

리액트에 있는 컴포넌트는 단지 자바스크립트 함수이다. html코드를 반환하는 함수이다.

다른 태그와 다른점은 대문자로 시작한다는 것이다.

 

컴포넌트 사용법

다른 파일에서 자바스크립트 함수를 만든다.

export한다.

import한다.

임포트하는 파일에 대문자로 쓰여진 함수이름을 넣는다.

 

더 복잡한 JSX 코드 작성

자바스크립트 함수 안에 HTML 코드에서 반드시 루트 요소의 태그가 하나 있어야한다.

 

 

JSX에서 동적 데이터 출력 및 표현식 작업하기

html에서 고정된 코드와 함께작업하지 않기

const expenseDate = new Date(2021, 2, 18)
  const expenseTitle = 'Car Insurance'
  const expenseAmount = 294.67
  return (
    <div className='expense-item'>
      <div>{expenseDate.toISOString()}</div>
      <div className='expense-item__description'>
        <h2>{expenseTitle}</h2>
        <div className='expense-item__price'>${expenseAmount}</div>
      </div>
    </div>

Date

JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.

var date1 = new Date(); // 현재 날짜 및 시간
var date2 = new Date(1991,11,25,3,50); // 1991년 12월 25일 3:50:00 (월 +1 주의)
var date3 = new Date('2014-6-4'); // 2002년 1월 1일 09:00:00
var date4 = new Date('2012-05-17 10:20:30'); // 2012년 5월 17일 10:20:30
출처: <https://dororongju.tistory.com/116> [웹 개발 메모장:티스토리]

 

Date.prototype.toISOString()

toISOString() 메서드는 단순화한 확장 ISO 형식의 문자열을 반환합니다. 반환값은 언제나 24글자 또는 27글자(각각 YYYY-MM-DDTHH:mm:ss.sssZ 또는 ±YYYYYY-MM-DDTHH:mm:ss.sssZ)입니다. 시간대는 언제나 UTC이며 접미어 "Z" 로 표현합니다.

 

const event = new Date('05 October 2011 14:48 UTC');
console.log(event.toString());

// expected output: Wed Oct 05 2011 16:48:00 GMT+0200 (CEST)

 

"props"를 통해 데이터 전달하기

props

사용자 지정 컴포넌트의 속성을 설정할 수 있다.

리액트 컴포넌트 사이에서 데이터를 공유할 수 있다.

리액트는 모든 컴포넌트에서 하나의 매개변수만을 사용한다.

 

 

 

컴포넌트에 "일반" JavaScript 논리 추가하기 컴포넌트를 여러 컴포넌트로 분할하기

 

더나은 방법

코드를 조금 더 쉽게 읽게 하기위해서는 변수를 설정한다.

const month = props.date.toLocaleString("en-US", { month: "long" });
  const day = props.date.toLocaleString("en-US", { day: "2-digit" });
  const year = props.date.getFullYear();

Number.prototype.toLocaleSting()

지정된 지역에서 사용하는 숫자의 표현방식으로 문자열로 리턴한다.

NumberObject.toLocaleString([locales [, options]])

locales - 내가 표현하고자 하는 지역의 언어 태그를 입력한다.

 

Date.prototype.toLocaleString()

지정된 지역에서 표현하는 방식의 날짜를 문자열로 리턴한다.

DateObject.toLocaleString([locales [, options]])

첫 번째 매개변수는 언어이고, 두 번째 매개변수는 해당 날짜형식을 구체적으로 구성하는 객체이다.

 

date.getFullYear()

var today = new Date();
var year = today.getFullYear();
console.log(year)
//2022

반환 값

현지 시간에 따라, 주어진 날짜의 연도에 해당하는 숫자

 

 

컴포넌트를 여러 컴포넌트로 분할하기

App 컴포넌트 안에는 ExpenseItem 컴포넌트가 사용중이고, ExpenseItem 컴포넌트 안에는 ExpenseDate 컴포넌트를 사용하고 있다. props의 도움으로 여러 개의 컴포넌트를 통해 데이터를 보낸다.

컴포넌트에서 최하위 컴포넌트로 데이터를 보낼 수 있다.

컴포넌트 안에 컴포넌트를 넣을 수 있다. (트리 형식)

<ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].date}
      />

<ExpenseDate date={props.date}/>

const day = props.date.toLocaleString("en-US", { day: "2-digit" });

 

 

 

연습하기: 리액트 및 컴포넌트 기본 사항

 

현재 프로그램에서 컴포넌트

 

App.js

-Expense.js-ExpenseItem.js - ExpenseDate.js

 

 

 

컴포지션"의 개념("children prop")

셸 같은 역할을 하는 컴포넌트를 만들어보자

 

셸

운영 체제 상에서 다양한 운영 체제 기능과 서비스를 구현하는 인터페이스를 제공하는 프로그램이다

웹 개발 할 떄 Card 컴포넌트의 의미는 둥글고 옅은 그림자를 가진 컨테이너이다.

 

props.childeren

언제나 이 사용자의 컨테이너의 열고 닫는 태그 사이에 있는

태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props

A 컴포넌트 사이에 B 컴포넌트가 있을 때, A 컴포넌트에서 B 컴포넌트 내용을 보여주려고 사용하는 props입니다.

 

Card 컴포넌트를 사용하는 이유

중복된 코드를 추출할 수 있다.

오류를 줄일 수 있다.

JSX 자세히보기

브라우저에는 JSX 코드를 지원하지 않기 때문에 변환된 코드를 살펴 볼 수 있다.

과거에는 항상 React를 임포해야 했다.

최신 프로젝트에서는 생략이 가능하다.