React - useState

• useState를 통한 컴포넌트에서 바뀌는 값 관리하기
  • 리액트 16.8 이전에는 함수현 컴포넌트에 상태를 관리할 수 없었음.
  • 16.8 이후 부터는 hooks라는 기능을 도입하면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다. (ustState는 이 훅들 중에 하나다)
• State
  1. 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
  2. state가 체인지 되면 변화를 감지하여 리렌더링을 수행한다.
  3. 클래스 vs 함수형 컴포넌트에서 사용하는 방법은 다르다. 함수형 컴포넌트에서는 hooks 개념을 이용해서 더욱 쉽게 사용 가능함.
• useState 사용하기
  • syntax : useState(초기값)
    • 배열 반환
      1. 첫번째 배열의 요소에는 현재값을 (getter과 동일)
      2. 두번째 배열의 요소에는 상태를 변경하는 Setter를 반환

    // 비구조화
    const [data, setData] = useState("초기값");
    

  • state는 어떤 타입이라도 상관없이 사용이 가능
  • state는 여러 개 일수도 있다.
  • state는 직접 수정하면 안된다. setter를 이용하여 작업해야 한다.
• 잘못된 리렌더링이 발생했을 경우 리렌더링 요인을 확인
  1. setState에 의한 state 변경
  2. 상위 컴포넌트에서 전달받은 props의 변경
  3. 상위 컴포넌트가 리렌더링 ⇒ 하위 컴포넌트도 리렌더링
  4. Provider의 value prop이 바뀔 때, context, provider 하위에서 해당 컴포넌트를 구독하고 있는 모든 컴포넌트 리렌더링 (Context Api에서 )
  5. 리덕스 스토어의 state에 변경 발생시, useSeletor를 이용해서 리덕스 스토어의 state를 조회하는 컴포넌트 리렌더링(리덕스에서..)
• 리엑트 이번트
  • 이벤트 규칙
    1. 이벤트 이름은 전부 카멜 표기법으로 표현
    2. ex) onclick ⇒ onClick, onKeyyp ⇒ onKeyUp
    3. 이벤트 전달할 때는 {함수} 형태로 사용
• 인풋값 핸들링 하기..
  1. input값이 변화되는 이벤트 처리는 onChange로 연결
  2. 이벤트 안, 첫 번재 매개변수에서 event 객체 활용 (e.target.속성값)
  3. setter를 이용해서 state 변경하기
  4. value 속성을 이용해서 state 동기화 처리
     • value = {상태값}을 처리
     • state를 통해 input의 value를 제어하지 않으면 추후에 잘못된 에러 문자를 만날 수 있음
• 이벤트들
  • 마우스 이벤트
    • click : 요소 클릭
    • dbclick : 요소 더블 클릭
    • mousedown : 요소 위에 마우스 버튼을 눌렀을 때
    • mousemove : 요소 위에서 마우스 포인터를 움직였을 때 이벤트
    • mouseover : 마우스 포인터가 요소 위에 옮겨질 때 이벤트
    • mouseout : 마우스 포인터가 요소를 벗어날 때 이벤트
    • mouseup : 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트
  • 키보드 이벤트
    • keydown : 키를 누르는 동안 이벤트 발생
    • keypress : 키를 눌렀을때 이벤트 발생
    • keyup : 키에서 손을 뗄 때 이벤트 발생
  • 문서 로딩 이벤트
    • 서버에서 웹 문서를 가져오거나 문서를 위 아래로 스크롤하는 동안 웹 문서를 브라우저 창에 보여주는 것과 관련된 이벤트
    • abort : 문서가 완전히 로딩 되기 전에 불러오기 멈췄을 경우 발생
    • error : 문서가 정확히 로딩되지 않았을 때
    • load : 문서로딩이 끝나면 발생
    • resize : 문서화면 크기가 바뀌었을 때 발생하는 이벤트
    • scroll : 문서 화면이 스크롤 되었을 때 이벤트
    • unload : 문서에서 벗어날 때 이벤트 발생
  • 폼 이벤트
    • blur : 폼 요소에 포커스를 잃었을 때 발생 이벤트
    • change : 목록이나 체크 상태 등이 변경되면 이벤트 발생
      • <input>, <selete>, <textarea> 태그에서 사용
    • focus : 폼요소에서 포커스가 놓였을 때 이벤트 발생
      • label, select, textarea, button
    • reset : 폼이 리셋되었을 때 이벤트 발생
    • submit : submit버튼이 클릭되었을 때 이벤트 발생

자세한건 요기

Event reference | MDN

• 컴포넌트 반복
  • 리액트에서 배열을 랜더링하는 방법
  • map 함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용
  • syntax : array.map(callbackFunction(currentValue, index, array), thisArg)
    • currentValue : 현재값
    • index : 현재 인덱스
    • array : 현재 배열
    • thisArg : callbackFuntion 내에 this로 사용될 값을 의미

---

• useRef : 특정 DOM 선택하기...
  • Javascript를 사용하는 경우에 특정 DOM선택은 getElementById(), querySelector() 같은 함수를 사용했다.
  • 리액트 사용하는 프로젝트에서 가끔 DOM을 직접 선택하는 상황이 발생하기도 합니다. 이때에 사용하는 것이 useRef(ref)입니다.
  • useRef는 훅으로 함수 컴포넌트에서 ref를 사용할 때 쓰는 것이고, 클래스형 컴포넌트에서는 콜백 함수를 쓰거나 React.createRef 함수를 사용함.