[TIL] 20230721 - String(),toString() 차이 / 리액트 무한스크롤 (react infinite scroll)

문자열로 형변환을 시킬때 String()을 사용하지만 가끔 toString()을 사용했기때문에 

정확히 어떤 차이가 있는지 궁금했다.

 

String() 은 null과 undefined에 대헤서도 잘 동작하는 반면,

toString() 사용시 에러가 발생한다.

 

• String() : 어떤 형태이든 문자로 형변환하여 반환 
• .toString() : 메서드는 특정 진수로 객체를 표현한 문자열을 반환 / null, undefined 형 변환 시 오류

확실히 값이 명시된 경우에는 둘 다 상관없지만,
null, undefined 와 같이 예외인 경우가 있을 수 있으므로 String()을 사용하는 것이 좋다.

 

https://velog.io/@kimkyeonghye/JS-String-%EA%B3%BC-.toString-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

리액트 무한스크롤 (react infinite scroll) 

 const lastPostRef = useRef();
  const [currentPage, setCurrentPage] = useState(1);
  const limit = 10;
  const offset = (currentPage - 1) * limit;
  const option = { root: null, rootMargin: '0px', threshold: 0.5 };
  const defaultOption = {
    root: null,
    threshold: 0.5,
    rootMargin: '0px',
  };

  const observer = new IntersectionObserver(
    entries => {
      if (entries[0].isIntersecting) {
        setTimeout(() => {
          setCurrentPage(prevPage => prevPage + 1);
        }, 500);
      }
    },
    {
      ...defaultOption,
      ...option,
    },
  );

  useEffect(() => {
    observer.observe(lastPostRef.current);
  }, []);




  return (
    <StUl>
      {searchList.length > 0
        ? searchList
            .map((item, index) => (
              <StyledPostsyBox key={index} onClick={() => handleDetailButtonClick(item.id)}>
                <div>
                  <StImage src={item.image} />
                  <StTitle>{item.location}</StTitle>
                  <StMpCategory>{item.category}</StMpCategory>
                </div>
              </StyledPostsyBox>
            ))
            .slice(0, offset + 10)
        : posts.data
            ?.filter(item => !category || item.category === category)
            .map((item, index) => (
              <StyledPostsyBox key={index} onClick={() => handleDetailButtonClick(item.id)}>
                <div>
                  <StImage src={item.image} />
                  <StTitle>{item.location}</StTitle>
                  <StMpCategory>{item.category}</StMpCategory>
                </div>
              </StyledPostsyBox>
            ))
            .slice(0, offset + 10)}
      <div ref={lastPostRef}></div>
    </StUl>
  );

https://velog.io/@yunsungyang-omc/React-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-used-by-Intersection-Observer-2

 

https://velog.io/@sjoleee_/React-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4

 

https://tech.kakaoenterprise.com/149