React_함수형 프로그램

함수형 리액트

Class 형에서 함수형 프로그램을 요즘은 더 많이 쓰고 있다.
그이유는 코드상으로 좀더 간결하게 사용이 가능하고 hook이 도입되어 state를 통한 데이터 관리와 이전에는 클래스에서만 가능 하던 것들이
많은 hook의 등장으로 클래스와 동등하게 사용이 가능하게 되었다.
디자이너와 협업시기에도 코드를 이해하기 좋고, 개발자들끼리도 코드의 가독성이 좋아 각광받고 있는 추세이다.

사용이 간편한 대표적인 hook들

useState

클래스의 경우 state={count: 0}과 같이 이용하여 데이터를 관리한다고 했을 떄

useState 의 경우 const = [count, setCount] = useState(초기값)

과 같이 useState 내부에 데이터 관리가 이행된다.
하여 데이터를 수정할떄 class에 정의하는 아래의 정의방식을

this.setState=({count: this.state.count + 1})

setCount=({count}) 로 아주 간략히 설정하는 것만으로 데이터 관리가 가능해진다.

useRef

useState를 사용하여 컴퍼넌트를 관리하는 경우 불필요한 리랜더링이 발생하게 된다.
이부분을 보완하기 위해서 사용할 수 있는 훅으로 입력 받는 태그에 ref={spanRef}
Const spanRef = useRef{} 를 각각 작성하여 useRef자체의 메모리에 저장하고 관리하여 리랙더링의 빈도수를 낮출 수 있다.

useCallback

위의 useRef 방법에서 추가적으로 불필요한 데이터 리랜더링을 줄이기 위한 방법으로
버튼에 연결되는 함수를 작동시키는 곳에 적용하여 함수를 누를떄마다 함수가 생성되서 작동되지 않고 useCallback 메모리 내에서 함수를 저장하고 관리하여 리랜더링 빈도수를 역시 줄여주게 된다.

UseEffect

useEffect의 경우 어플리케이션의 컴퍼넌트가 실행될때마다 작동되는 특징이 있는데
useEffect =(()=>{},[statedata]);
위에처럼 입력하는 경우 statedata 가 업데이트 될떄만 실행이되고, []단순 공란으로 두는 경우 처음에만 실행되고 이후에는 실행되지 않는 특징이 있다.
그래서 최초 기동시에 발생하는 로그인이나 어플리케이션의 로딩과 같은 경우 사용하는 경우들이 있다.

Spread Operator

• Spread Operator는 Shallow-cloning을 합니다. 🚨
  배열안에 있는 모든 오브젝트 또 그 안에 들어 있을 수 있는 오브젝트들까지 모두 다 한땀 한땀씩 새로운 것으로 바꿔 주는것이 아니라, 단순히 제일 상위의 배열 껍데기만 새로운 껍데기로 바꿔주고 안의 오브젝트는 예전의 그 것을 참조값을 복사해 와요.
  Spread Operator를 이용하면 처음에는 안에 들어 있는 내용물들을 복사해 오지만 (값이 아니라 레퍼런스, 참조값만 복사해 오죠!) 
  배열 자체는 새로운 것을 만들기 때문에 배열에 아이템을 삭제 하거나, 추가 하면 배열의 내용은 달라질 수 있어요.

state를 직접 변경하면 안되는 이유

기본적으로 프로그래밍에서는 오브젝트를 직접적으로 수정하는 것 자체가 좋지 않다.
그곳에서 오류가 발생할 가는성이 있기때문에 오브젝트는 Immutability 를 유지시켜줘야하는 것이 원칙이다.
그런 원칙적인 부분과

첫번쨰로 setState는 비동기적으로 움직이는 메써드 이기때문에 직접적으로 수정되어 버리는 경우 업데이트되는 과정에 오류가 발생할 확률이 높아진다.
두번쨰는 Purecomponent 나 memo를 사용하는 경우 변경된 데이터로 레퍼런스를 참고하고 업데이트 하려는 과정에서 데이터값이 변경되지 않은 것으로 생각하여 업데이트를 안하게 된다.

Prop 전달할떄 tip
데이터 사용시 Props.video.가 반복되는경우 프롭을 (props)대신 ({video})로 사용하거나 ({video: items}) 비디오를 아이템스로 바꿔서 사용할 수 있도록
설정이 가능하다.
비디오 안에 있는 것을 쓰고자 한다고 할떄는 ({video: {snippet}})과 같이 정의할 수 있다.

Component 전체적인 것을 스타일링 할떄는 div태그로 감싸고 그 위에 해야한다.

Deleted && <component>

와 같은 구문을 쓸떄
스타일링이 꼬이지 않게 하려면

selected && <><component/><>

와 같은 형태로 해줘야한다.
**위와 같은 오류는 컴퍼넌트를 사용하면서 의외로 많이 나타나는 현상으로 주의해야한다. (어짜피 오류뜨면 바로 수정하면 별일 없기는 하다.)