react17 [TDD] 투두리스트를 TDD로 개발하기 - TodoItem 본 게시글은 아래 포스팅을 읽고 작성했습니다. 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.. 2023. 5. 24. React 의 의존성 배열의 얕은 비교 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.. 2023. 5. 17. [React] 렌더링과 컴포넌트 렌더링 순서 렌더링이란 ? 쉽게말하면, 화면에 UI요소가 그려지는 or 보여지는 동작을 말한다. 더 딥하게 설명하자면, 코드상에서 props 와 state 에 기반하여 컴포넌트가 그려지는 과정이 될 것이다. 위의 화면에서 사용자가 검색어를 입력하고, 리스트를 추가하고, 체크하고, 삭제하는 과정을 렌더링된다 라고 말할 수 있다. 리액트의 컴포넌트 렌더링 순서 리액트에서 컴포넌트 렌더링 순서는 최하단 컴포넌트 부터 시작해서 최상단 컴포넌트가 마지막 순서가 된다. 2023. 4. 20. Stop Using useMemo Now 원문: https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70 번역: https://velog.io/@lky5697/stop-using-usememo-now 을 읽고 재정리하였습니다. useMemo 란 useMemo 는 알다시피 계산결과를 memorization (유사하게, 기억한다 라고 생각하자.) 한다. const result = useMemo(() => { // running.... return value }, [deps]) 코드가 위와 같을 때, deps 로 들어온 state 값에 따라 side effect 로 useMemo 안의 로직이 실행되고 그 결과값을 리턴하게 된다. deps 의 값에 따라 리턴되는 value 값이 다를.. 2023. 4. 18. 이전 1 2 3 4 5 다음 728x90 반응형
