S2U6 W7D2
벌써 7주차의 시작이자
전체 과정의 4분의 1을 마치고 4분의 2로 들어가는 시점이다
점점 어렵고 매일마다 사고의 확장이 요구된다...
낯설어서 그런 거야... 익숙해지면 괜찮을 거라고 생각한다..!
수료 이후 나의 모습이 기대된다 ㅎㅎ
화이팅!!
Before learn...
-
JSX란 자바스크립트가 확장된 문법이다.
-
React SPA란 사용자가 페이지를 전환할 때 전체 페이지가 아닌 필요한 부분의 데이터만 받아 페이지를 업데이트 하는 웹 사이트 및 웹 앱을 말한다.
-
React Router란 React에서 다양한 경로에 따라 다양한 뷰를 보여주는 라이브러리다.
✅ TIL
- React state & props
- React 이벤트처리
- Controlled Component
- React = one-way data flow
💡Props
: 웹 애플리케이션에서 해당 컴포넌트가 가진 속성 (property)
읽기 전용 객체 (read-only)
상위 컴포넌트로부터 전달받은 값이다.
외부로부터 전달 받아 변하지 않는, 함부로 변경될 수 없는 값이다. (immutable)
Props 사용하기
//2가지 방법
function Parent() {
return (
<div className='parent'>
<h1>parent</h1>
//1 attribute='{value}'
<Child text={"hi"} />
<Child text={'hello'} />
//2 tag 사이에 입력하기
<Child>hi</Child>
<Child>hello</Child>
</div>
);
};
function Child(props) {
console.log(props)
return (
<div className='child'>
//1 dot notation으로 key를 입력하여 value를 불러온다
<p>{prop.text}</p>
//2 props.children으로 전체 values를 불러온다
<p>{props.children}</p>
</div>
);
};
export default Parent;💡State
: 상태
내부에서 변화하는 값
컴포넌트를 사용하는 동안 컴포넌트 내부에서 변할 수 있는 값
컴포넌트에서 변화가 필요한 데이터를 state로 정한다.
useState 함수를 사용한다.
State hook "useState"
배열을 반환한다.
0번째 요소는 현재 state 변수,
1번째 요소는 해당 변수를 갱신할 수 있는 함수,
인자는 state의 초기값
import {useState} from 'react';
function 해당컴포넌트() {
const [state 저장 변수, state 갱신 함수] = useState(state 초기값);
...
return (
...
)
}- React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다.
- React state는 상태 변경 함수 호출로 변경해야 한다. 강제 변경 불가!
--->렌더링되지 않음
React의 이벤트 처리
- event는 소문자 대신 camelCase 사용
- jsx를 사용하여 문자열 대신 이벤트 처리 함수(Event Handler) 전달
<button onClick={handleEvent}>Event</button>onChange
input의 텍스트가 바뀔 때마다 발생하는 이벤트
<input> <textarea> select 와 같은 form 엘리먼트에서 사용
이벤트가 발생하면 handleChange 함수가 작동하고 새로운 state로 갱신한다.
function SomethingForm() {
const [something, setSomething] = useState('');
const handleChange = (event) => {
setSomething(event.target.value);
}
return (
<div>
<input type='text' value={something} onChange={handleChange}></input>
</div>
);
};onClick
사용자가 클릭을 했을 때 발생하는 이벤트
<button> <a> 태그 등 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용한다.
arrow function을 사용하여 함수를 정의하여야 해당 컴포넌트가 가진 state에 함수들이 접근할 수 있다.
function SomethingForm() {
const [something, setSomething] = useState('');
const handleChange = (event) => {
setSomething(event.target.value);
};
//방법 2에서 사용하는 함수
const handleClick = () => { alert(name); };
return (
<div>
<input type='text' value={something} onChange={handleChange}></input>
//1 함수 정의하기
<button onClick={() => alert(something)}></button>
//2 함수 자체를 전달하기
<button onClick={handleClick}></button>
</div>
);
};❗️onClick 이벤트에 함수를 전달할 때
함수를 호출하는 것이 아니라 (---> 함수 실행, 종료 후 undefined가 전달됨)
함수를 정의하거나 함수 자체를 전달해야 한다!
💡Controlled Component
: React가 state를 통제할 수 있는 컴포넌트
input에 값을 입력하면 state도 onChange 이벤트가 발생한다.
변경된 state와 input의 value또한 같게 작성해야 한다.
input의 value 변경에 따라 react의 state가 변경되는 것 = controlled component 구현
💡React : 단방향 데이터 흐름(one-way data flow)
React는 하향식(top-down)의 단방향 데이터 흐름을 따른다.
데이터를 전달하는 주체는 부모 컴포넌트다.
컴포넌트는 props를 통해 전달받은 데이터가 어디에서 온 건지 알 수 없다.
- 컴포넌트 계층 구조로 나누기
React 개발은 페이지 단위가 아닌 컴포넌트 단위로 시작한다.
컴포넌트를 만들고 페이지를 조립해나간다. (bottom-up : 테스트가 쉽고 확장성이 좋다.)
- 단일 책임의 원칙
하나의 컴포넌트는 한 가지 일을 한다.
- 데이터 정의
컴포넌트 간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치를 설정한다.
상태는 최소화 하는 것이 좋다. 상태가 많아질수록 애플리케이션은 복잡해진다.
두 개의 다른 컴포넌트(자식 컴포넌트)가 특정 상태에 의존적일 경우, 공통 소유 컴포넌트(부모 컴포넌트)를 찾아 그곳에 상태를 위치시킨다.
더 공부할 것
select
pop up
