컴포넌트

React를 이용해 웹을 개발하며 컴포넌트를 만들때 예상치 못한 에러로인해 추가적인 커밋과 PR을 경험한 적있다. 이번에 새롭게 참여한 프로젝트에서는 UI 테스팅 도구인 Storybook과 다른 테스팅 도구인 Testing-library/react를 사용하게되었다. 만드는 컴포넌트를 테스트하는 과정을 통해 발생 가능성이 있는 에러를 사전에 방지할 수 있기에 이번 프로젝트에서는 테스트 과정을 본격적으로 다룰 예정이다. 왜 React Testing-Library 인가? React Testing Library는 React 컴포넌트를 테스트하기 위해 설계된 라이브러리 이며, 실사용 환경과 비슷한 환경을 인스턴스가 아닌 실제 DOM 노드를 사용해 테스트하므로 더욱 신뢰할 수 있는 환경을 제공한다. 또한 props..

1. State란? 리액트에서 State는 컴포넌트 내부에서 지속적으로 변할 수 있는 값을 의미한다. 개발자의 의도대로 변할 수 있으며 사용자의 입력에 따라 새로운 값으로 변경할 수 있다. state가 변경되면 React가 자동으로 계산해 변경된 부분을 리렌더링 한다. props는 부모 컴포넌트로 부터 받아 자식 컴포넌트에서 변경이 불가능하고 읽기만 가능한 값이다. 2. 함수형 컴포넌트에서 useState을 사용해 state 관리하기 함수형 컴포넌트에서 state를 관리하기 위해 useState를 사용한다. import { useState } from "react"; const App = () => { const [value, setValue] = useState(""); ... } 위의 코드에서 use..

1. React 컴포넌트란? React 컴포넌트는 UI를 나타내는 독립적이고 재사용이 가능한 모듈이다. 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 타입이 있다. React 공식 메뉴얼에는 함수형 컴포넌트 사용을 권장하기 때문데 이 글에서는 함수형 컴포넌트를 다루겠다. 2. 함수형 컴포넌트 함수형 컴포넌트는 React에서 UI를 정의하기 위해 사용되는 함수이다. React 공식 문서에서 최신 버전의 React에서는 함수형 컴포넌트 사용을 권장한다. 함수형 컴포넌트의 장점 함수형 컴포넌트의 장점은 간결하게 작성이 가능하며 코드의 가독성이 뛰어나고, Hook을 이용해 state와 라이프 사이클을 제어할 수 있는 등 클래스 컴포넌트 처럼 동작할 수 있는 점이다. 또한 컴포넌트에서 다른 컴포넌트로 ..

React는 오직 V(View)만 신경 쓰는 라이브러이다. 1. 컴포넌트 React 프로젝트에서 특정 부분의 생김새와 재사용 가능한 기능들을 내장하며, 컴포넌트의 생김새와 작동 방식을 정의한 선언체이다. 2. 렌더링 사용자 화면에 뷰를 보여주는 것을 렌더링이라 한다. React는 가상DOM을 사용해 렌더링을 이루지만, 변경된 부분만 실제DOM에 적용된다. 2.1 초기 렌더링 사용자에게 맨처음 어떻게 보일지를 정하는 작업 위의 작업은 render() 함수가 한다. render() 함수는 뷰의 모습과 동작방식이 담긴 정보 객체를 반환한다. 최상위 컴포넌트가 render() 하면 자식 컴포넌트도 재귀적으로 렌더링 한다. render() 함수가 실행되고, 해당 컴포넌트의 가상 DOM이 생성되며, 변경사항이 실제..