7월 5일 월요일

DOM 이해하기

DOM(Document Object model)의 약자로 , HTML요소를 Object처럼 조작할 수 있는 모델이다. DOM은 프로그래머 관점에서 바라본 HTML이다. DOM을 이해하고 조작할 수 있으면 , HTML을 단순한 문서에서 웹 앱으로 발전 시킬 수 있다. DOM은 브라우저 환경에서 JS를 통해 HTML을 조작할 수 있다. HTML문서에서 이미 작성 되어 있는 엘리먼트에 접근하거나 , 새로운 엘리먼트를 생성하거나 삭제할 수 있다.
HTML과 JS를 연결하는 방법을 알고 , DOM을 이해해야한다.

DOM의 구조를 조회할 때

console.dir 이 유용하다. console.log 와 달리 DOM을 객체의 모습으로 출력한다.

7월 6일 화요일

유효성검사

이벤트객체

7월 7일 수요일

고차함수 (코플릿)

7월 8일 목요일

React-Twittler-Intro

7월 9일 금요일

React-Twittler-SPA

다음주 내용에 대한 예습

React State & Props

Achievement Goals

• state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용항 수 있어야 한다.

• React 함수 컴포넌트 (React Function Component) 에서 state hook을 이용해서 state를 정의 및 변경할 수 있어야 한다.

• React 컴포넌트 (React Component)에 props를 전달 할 수 있어야 한다.

• 이벤트 핸들러 함수를 만들고, React에서 이용할 수 있어야 한다.

• 실제 웹 어플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고, props에 적합한지 판단할 수 있어야 한다.

• 실제 웹앱의 개발 시 적합한 state 와 props의 위치를 스스로 정할 수 있어야 한다.

• React의 단방향 데이터 흐름 (One-way data flow)에 대해 자신의 언어로 설명할 수 있어야 한다.

State

• 살면서 변할 수 있는 값

• 컴포넌트 사용중 컴포넌트 내부에서 변할 수 있는 값

props

특징

• 컴포넌트의 속성을 의미한다 (property)
  Props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로 , 웹앱에서 해당 컴포넌트가 가징 속성에 해당한다

• 부모 컴포넌트(상위컴포넌트)로부터 전달받은 값이다.
  React Component는 JS함수와 클래스로 , props를 함수의 argument처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서 , 컴포넌트가 최초 렌더링 될때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.

• 객체 형태이다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.

• props는 읽기전용이다. props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이다. 그래서 props는 함부로 변경될 수 없는 읽기전용 (Read-only) 객체가 되었다. 함부로 변경되지 않아야 하기 때문이다.
  읽기 전용 객체가 아니라면 props를 전달받은 하위컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다. 즉 개발자가 의도치 않는 side effect가 생기게되고 , 이는 React의 단방향, 하향식 데이터 흐름 원칙에 위배된다.

How to use props

props를 사용하는 방법은 아래와 같이 3단계로 나뉘어져있다.

• 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.

• props를 이용하여 정의된 값과 속성을 전달한다.

• 전달받은 props를 렌더링한다.

function Parent() {
  return (
    <div className="parent">
    	<h1>I'm the parernt</h1>
    	</Child>
    </div>
    );
};

function Child() {
  return (
    <div className="child"></div>
    );
};

[<parent>,<child> component 선언]

컴포넌트를 만들었으니, 이제 전달하고자 하는 속성을 정의해보자. HTML에서 속성과 값을 할당하는 방법이다.

<a href="www.codestates.com">Click me to visit Code States</a>
[HTML 속성과 값 다루는 법]

React 에서 속성 및 값을 할당하는 방법도 이와 유사하다. 다만, 전달하고자 하는 값을 중괄호 {} 를 이용해서 감싸주면 된디.

<Child attribute={value} />
 [React에서 JSX 속성 및 값을 할당하는 방법1]

<Child text={"I'm the eldest child"}
[React 에서 JSX속성 및 값을 할당하는 방법2]

function Child(props) {
  return (
    <div className="child"></div>
    );
};
[<Child>컴포넌트에서 props 매개변수 사용 예시]

props를 전달받아서 이제 props를 렌더링해보면 된다. props를 렌더링하려면 JSX 안에 직접 불러서 사용하면 된다. 다만, props는 객체라고 하였고 , 이 객체의 {key : value} 는 <parent> 컴포넌트에서 정의한
{ attribute : value } 의 형태를 띄게 된다. 따라서 JS에서 객체의 value에 접근할 때 dot notation을 사용하는 것과 동일하게 props의 value 또한 dot notation으로 접근할 수 있다. 아래와 같이 props.text 를 JSX에 중괄호와 함께 작성하면 잘 작동한다.

function Child(props) {
 return (
   <div className="child">
     <p>{props.text}</p>
     </div>
   );
};
[<child> 컴포넌트에서 props.text렌더링 예시]

Props VS State

• props는 외부로부터 전달 받은 값

• state는 내부에서 변화하는 값

어떤 것이 props 또는 state에 적합할까..

Props

• 이름

• 성별

State

• 나이

• 현재 사는 곳

• 취업여부

• 결혼/연애 여부