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
- 나이
- 현재 사는 곳
- 취업여부
- 결혼/연애 여부
