Next.js를 구축하고 환경설정하는 게시글은 띄엄띄엄 정리하긴 했지만, 하나의 게시글로 정리하고 싶어서 다시 씀. 읽기전에 패키지 버전차이가 있을 수 있습니다. (이로인해 실행이 제대로 되지 않을 수 있습니다.) 초기셋팅은 왠만하면 공식문서를 보고 따라하는 것이 좋습니다. 저는 node pakage manaement tools 로 yarn 을 사용합니다. (npm으로 설치할 수도 있지만, yarn을 더 선호하는 편 입니다.) 타입스크립트를 사용합니다. Next.js 프로젝트 생성 yarn create next-app --typescript 1. 프로젝트 이름을 적어주세요 2. ESLint를 사용할 것인지 3. Tailwind CSS 를 사용할 것인지 4. src directory를 사용할 것인지 5. ..
본 게시글은 아래 포스팅을 읽고 작성했습니다. https://velog.io/@seo__namu/%EC%9A%94%EA%B5%AC%EC%82%AC%ED%95%AD-%EC%A0%95%EC%9D%98%ED%95%98%EA%B8%B0 요구사항 정의하기 React + TDD 투두리스트 개발하기 시리즈 요구사항 정의하기 velog.io TDD 테스트 주도 개발 진행과정 1. 실패하는 테스트코드 작성 2. 테스트 케이스를 통과하기 위한 최소한의 코드 작성 3. 코드 리팩토링 위의 단계를 계속 반복한다. 즉, 요구사항들에 부합하는 테스트코드를 작성하고, 그 테스트코드가 실행되기 위한 컴포넌트 로직을 짜는 것이다. 준비물 - react project - jest(자바스크립트 테스팅 프레임워크) + testing Lib..
React는 이전 Props와 새 props를 Shallow equality 를 비교한다. 즉, 새 props와 이전 props 들의 참조가 동일한지 여부를 고려한다. 부모가 다시 렌더링될 때 마다, 새 객체나 배열을 생성하면 개별 요소가 각각 동일하더라도 React는 변경된 것으로 간주한다. 얕은비교 기본 타입 데이터의 경우 값이 동일한지만 비교하고, 객체의 경우 참조값만 비교한다. => 그래서 객체를 state로 사용하게 될 경우, 값이 같더라도 참조값이 다르기 때문에 재렌더링이 발생한다. const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(obj1 === obj2); // false https://dori-coding.tist..
렌더링이란 ? 쉽게말하면, 화면에 UI요소가 그려지는 or 보여지는 동작을 말한다. 더 딥하게 설명하자면, 코드상에서 props 와 state 에 기반하여 컴포넌트가 그려지는 과정이 될 것이다. 위의 화면에서 사용자가 검색어를 입력하고, 리스트를 추가하고, 체크하고, 삭제하는 과정을 렌더링된다 라고 말할 수 있다. 리액트의 컴포넌트 렌더링 순서 리액트에서 컴포넌트 렌더링 순서는 최하단 컴포넌트 부터 시작해서 최상단 컴포넌트가 마지막 순서가 된다.
