state
:변수 선언의 또 다른 방식
const [state, setState] = useState(초기값)
변동 시 자동으로 UI에 반영되게 만들고 싶을 때 사용한다.
자주 변경될 것 같은 것에 사용한다.
setState
:변수 값을 변경하는 함수이다.
스프레드
:괄호를 벗겼다가 다시 씌워주세요! 메모리에 대한 참조 화살표도 방향을 바꿔주세요! 라는 뜻
[...array]
state가 배열이나 객체면 무조건 이렇게 혹은 concat으로 복사해주어야 한다.
컴포넌트
:반복적으로 써야 할 때, 페이지 나눌 때, 자주 변경되는 것들에 쓰인다.
function Modal() {
--- }
<Modal/>
동적인 UI
1.HTML, CSS로 미리 디자인을 완성한다.
2.UI의 현재상태를 state로 저장한다.
3.state에 따라 UI에 어떻게 보일지 작성한다.
map
:배열안의 자료 갯수만큼 함수 안의 코드를 실행해준다.
array.map((item) => {
---
return ---
}
함수안의 파라미터는 배열안에 있던 자료이다.
return안에 적는 것을 배열로 다시 담아준다.
array뒤에 ?를 붙이면, 배열이 아닐 시 map을 실행하지 않도록 한다.
onClick
:누르면 변경
<button onClick={() => {}}>추가</button>
onChange
:값을 적으면 변경
<input onChange={() => {}}/>
event.target.value
:input에 사용자가 적은 값을 가져오고 싶을 때
const input = (event) => {
setTitlte(event.target.value)
}
<input onChange={input} />
event.stopPropagation
:상위 html로 퍼지는 이벤트 버블링을 막을 때 사용한다.
event.stopPropagation()
event.preventDefault
:새로고침 방지할 때 사용한다.
event.preventDefault()
props
:부모->자식에게 state를 전송할 때
1.<자식 작명={state이름}>
<Modal title={title}/> => 자식
2.props 파라미터 등록 후 props.작명 사용
function Modal(props) {
<p>{props.title}</p>
}
action
:상태에 어떠한 변화가 필요하게 될 때 우리는 action을 발생시킨다.
{
type: "ADD_TODO"
data: {
id:0,
text:'리덕스 배우기'
}
}
action creator
:액션을 만드는 함수이다. 단순이 파라미터를 받아와 action객체 형태로 만들어준다.
export const addTodo(data) {
return {
type: 'ADD_TODO'
data
}
}
reducer
:state의 변화를 일으키는 함수이다. state와 action두가지 파라미터를 받아온다.
const counterReducer(state, action) {
switch(action.type){
case:'INCREASE':
return state + 1
case:'DECREASE':
return state -1
default:
return state
}
}
store
:리덕스에서는 한 애플리케이션 당 하나의 store을 만들게 된다.
store안에는 현재의 state와 reducer가 들어가있다.
dispatch
:store의 내장함수 중 하나이다. action을 발생시키는 것
subscribe
:리덕스 데이터를 가져오기 위해 구독한다고 표현하는 것인데, 보통 이것을 쓰지않고
useSelector hook을 사용해 리덕스 store상태에 구독한다.