리액트 키워드

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을 발생시킨다.

• action은 객체로 표현된다.
• action은 type을 필수적으로 가지고 있다.

{
  type: "ADD_TODO"
  data: {
    id:0,
    text:'리덕스 배우기'
  }
}

action creator
:액션을 만드는 함수이다. 단순이 파라미터를 받아와 action객체 형태로 만들어준다.

• 컴포넌트에서 더욱 쉽게 action을 발생시킬 수 있다.
• export로 내보내어 다른 파일에서 사용한다.

export const addTodo(data) {
  return {
    type: 'ADD_TODO'
    data
   }
}

reducer
:state의 변화를 일으키는 함수이다. state와 action두가지 파라미터를 받아온다.

• 현재의 상태와, 전달받은 action을 참고하여 새로운 상태를 만들어서 반환한다.
• 여러개의 reducer를 만들고 이를 합쳐서 RootReducer를 만들 수 있다.

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을 발생시키는 것

• action을 파라미터로 전달한다.(dispatch(action))
• store는 reducer함수를 실행시켜 해당 action을 처리하여 새로운 상태를 만들어준다.

subscribe
:리덕스 데이터를 가져오기 위해 구독한다고 표현하는 것인데, 보통 이것을 쓰지않고
useSelector hook을 사용해 리덕스 store상태에 구독한다.