React로 개발해 보았다~ 여러가지 눈치챈 것 쁘띠 정리~

소개

2 개월 정도 React를 사용하여 개발했습니다.
그 중에서도 공부가 된 일이나, 이런 실수 일생하고 싶지 않다는 것을 아웃풋 해 가고 싶습니다.

props 전달

상위 구성 요소에서 하위 구성 요소로
값을 전달할 때 props로 전달하고 있습니다.

그 때 함수 내에서 props로 받고,
props.~~~에서 사용하고있었습니다.

hoge.jsx

 // 例
export default hoge = () => {
  return (
    <hogeChildren data="hogehoge" dataLayout="hogelayout"/>
  )
}

const hogeChildren = (props) => (
  <>
    <div>{props.data}</div>  // =>hogehoge
    <div>{props.dataLayout}</div> // =>hogelayout
  </>
)

받을 때 ({recommed})
props로 하지 않아도 된다

hoge.jsx

 // 例
export default hoge = () => {
  return (
    <hogeChildren data="hogehoge" dataLayout="hogelayout"/>
  )
}

const hogeChildren = ({ data, dataLayout }) => (
  <>
    <div>{data}</div>  // =>hogehoge
    <div>{dataLayout}</div> // =>hogelayout
  </>
)

props 쓰지 않아도되는 것은 개인적으로

커스텀 후크

Custom Hooks란?

이름이 "use"로 시작하고 다른 후크를 호출 할 수있는 JavaScript 함수입니다. (참조: React document 자체 후크 만들기 )

이번은 첫회 이외이고 useEffect로 제2인수치가 변경했을 때만 처리를 실시할 때에 사용했으므로 그것을 기록합니다.

hogeUserEffect.jsx

const fisrtFlgRef = useRef(false);

  useEffect(() => {
    if (fisrtFlgRef.current) {
      document.title = `${count} 回クリックしたよー`;
    } else {
      fisrtFlgRef.current = true;
    }
  }, dependencyList);

플래그를 준비하고 처음에는

여기라면 매번 useRef를 사용하여 생성해야 할 필요가 있기 때문에

hogeUserEffectCustom.jsx

const useEffectCustom = (func, dependencyList) => {
  const fisrtFlgRef = useRef(false);

  useEffect(() => {
    if (fisrtFlgRef.current) {
      func();
    } else {
      fisrtFlgRef.current = true;
    }
  }, dependencyList);
}

export default useEffectCustom;

hogeUserCustom.jsx

import useEffectCustom from hogeUserEffectCustom.jsx

  useEffectCustom(() => {
    document.title = `${count} 回クリックしたよー`;
  }, [count])

이렇게 ref에서

자세한 내용 useEffect에서 첫 번째 렌더링을 실행하지 않고 처리하는 방법을 알고 싶다면 여기를 참조하십시오.
useEffect 첫 렌더링에서 실행하지 마세요 !!!
신세를 졌습니다

customhooks에 대해 더 알고 싶은 분은 문서로
자체 후크 만들기

UseEffect 무한 루프

이것은 부끄러운 실수입니다만 공감할 수 있는 분이 계시면 매우 기쁩니다.

useEffect에서의 제 2 인수의 지정을 제 1 인수로 변경하는 내용으로 하면 무한 루프에 빠졌습니다.

hoge.jsx

  useEffect(() => {
    count++
    console.log(`${count}回clickされたよー`)
  }, [count])

이 예는 고마워요.
엄청난 양의 consolelog가 나왔습니다.

요약

실제로 실장해 보지 않으면 눈치채지 못하는 것에 상당히 있어요. .

참조 기사

React 문서 자체 후크 만들기
useEffect 첫 번째 렌더링에서 실행하지 마세요 !!!