Den`s blog

컴포넌트/페이지 Testing 프론트엔드쪽 작업을 할때에 접하게 되는 것 중에 @testing-library 라는 것이 있다. 오늘은 프론트엔드 테스팅을 할 때 페이지 렌더 테스트 하는 방법에 대해서 알아보려고 한다. 필자는 React (w/ Typescript) 로 진행하였다. 테스팅환경 개요 컴포넌트를 테스트할 예정이고, 해당 컴포넌트가 하는 일은 로그인 상태에 따라서 렌더링할 라우터를 결정한다. 간단한 코드 샘플을 보자 export const App = () => { return isLoggedInVar ? : } 위와 같이 렌더링을 하는데, 내가 테스트 할 것은 isLoggedInVar 에 따라서 분류가 잘 되나 만하고 싶다. 저 라우터들 안에서 지지고 볶고 하는 것은 의미가 없다. 그러려면 저 ..

이번 포스팅에서는 React 에서 화면전환에 사용되는 react-router-dom 에서 useHistory 와 useLocation 에 대해 알아보려고 한다. 일단 react-router-dom 은 별도의 설치가 필요하므로 진행해준다. npm install react-router-dom Router 구성은 생략하도록 하겠다. 1. useHistory Hook const history = useHistory(); const onSearchSubmit = () => { const { searchTerm } = getValues(); history.push({ pathname: "/search", search: `?term=${searchTerm}`, state: { searchTerm, } }); } us..

이전 포스팅에서 ReactJS 의 Class Component 를 살펴보면서 가장 기초적인 부분들을 확인해 보았다. 이번에는 Updating과 State 에 대해 알아보도록 하자. ReactJS 에서는 State 라는 것을 가지고 있는데, 이 아이는 유동적인 데이터를 사용할 때 써먹는다. 기본적으로 this.state = {}; 위와 같이 사용을 하는데, 이는 private 처럼 사용해야한다, 직접 조작해서는 안되는 뜻! 변경이 필요할 때는 마치 다른 클래스의 setter 를 사용하듯 setState 메소드를 활용해주어야 한다. 그 이유는 Updating과 관련이 있는데, state 가 변경될때마다 ReactJS는 렌더링을 다시 하는데, setState 메소드를 사용하지 않는다면 이 부분을 감지 못하므로..

깃헙 블로그를 만들어보면서 제대로 공부를 시작하기로 했고, 그 일련의 작업들로 기초부터 다지고 있다. 그래서, ReactJS 를 공부를 시작했는데 그 시작에 앞서 ReactJS 에서 가장 많이 사용되는 거로 알고 있는 Component의 생명주기에 대해서 알아보자. 핵심은 render() 함수 인데, 이 함수가 가상돔에 HTML 코드를 써준다 라고 생각하면 된다. ReactJS 의 개념? 이라고 이해했다. render() 를 기준으로 전/후로 나뉘고, 간략하게 표현하자면 mount -> render -> mounted 와 같다. (unmount 는 제외하고.) 이를 함수로 자세히보자면 마운트되면서 constructor() 가 render() 되기전에 실행되며, render() 되고 나면 component..