TIL 220817 React 이것저것 + Git squash merge

Controlled Component, Uncontrolled Component(제어 컴포넌트와 비제어 컴포넌트)

비제어 컴포넌트는 기존의 바닐라 자바스크립트 방식과 비슷하다. useState를 사용하지 않고 ref를 사용해서 값을 받아온다. 비제어 컴포넌트는 값을 실시간으로 동기화하지 않는다. 반면에 제어 컴포넌트는 항상 최신값을 유지한다. 제어 컴포넌트를 사용하는게 조금 더 리액트스럽다고 한다.

input의 경우 value와 이벤트 함수로 컴포넌트를 제어하는 하면 제어 컴포넌트이고, ref를 사용해서 ref의 current.value를 가져오면 비제어 컴포넌트인 것 같다. 제어 컴포넌트를 좀 더 추천하는 것 같아서 이제는 되도록 제어 컴포넌트를 사용해야겠다.

참고

 

 

useRef

useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다. 순수 자바스크립트 객체를 생성하며 DOM 노드나 React 엘리먼트에 접근할 때 사용할 수 있다. React로 ref객체를 전달하면 React는 노드가 변경될 때마다 변경된 DOM 노드의 값을 .current 프로퍼티에 설정한다.

 

 

useRef와 createRef

클래스 컴포넌트는 createRef를 사용하고 함수 컴포넌트는 useRef를 사용한다. useRef는 함수형 컴포넌트에서만 사용가능하며 ref를 만들고 초기값을 할당한다. createRef는 둘 다 사용할 수 있으며 ref를 만들기만 한다. 클래스 컴포넌트는 인스턴스를 생성해 렌더 메소드를 호출하는 방식으로 리렌더링 한다면, 함수 컴포넌트는 함수를 리렌더링 마다 다시 실행한다. 그래서 함수 컴포넌트에서는 리렌더링될 때마다 ref를 새로 생성하기 때문에 createRef를 쓰기가 힘들다.

 

 

useRef와 forwardRef

useRef로 생성한 ref를 자식 컴포넌트에게 props로 전달해줄 때 forwardRef를 쓴다. 첫번째 인자로 props를 받고 두번째 인자로 ref를 받으면 된다.

// 부모컴포넌트
<MyComponent1 props={data} ref={myRef}>

// 자식 컴포넌트
const MyComponent2= forwardRef((props,ref) => {
 ...
})

 

 

Router와 useNavigater

둘 다 리액트 라우터를 이용해 페이지를 이동하는 방법이다.

클릭하면 바로 페이지 이동을 할 때는 Router와 Link 컴포넌트를 이용하면 좋고, 페이지 전환시에 추가적으로 처리해줄게 있을 때는 useNavigater를 쓰면 좋다.

 

 

Link와 a태그

Link 컴포넌트는 동일한 서비스 내에서 페이지 이동이 필요할 때 사용하고, a태그는 외부 페이지로 이동할 때 사용한다. Link는 새로고침이 일어나지 않고 a는 새로고침이 일어난다.

 

 

에러메세지 확인

리액트에서는 여러가지 이유들로 에러메세지를 띄워준다. 의도한데로 동작하더라도 에러메세지가 뜨는 경우가 있는데 이는 좋은 코드는 아니라고 볼 수 있다. 좋은 코드를 위해서 콘솔에 에러메세지가 뜨는지 잘 확인하는 것이 좋다.

---

Git squash merge

merge와 rebase 같이 브랜치를 합할 때 사용한다. 여러개의 커밋을 합해서 하나의 커밋으로 만든다음 브랜치에 추가한다. 여러개의 커밋을 하나의 커밋으로 묶고 싶을 때 쓰면 된다. 커밋 히스토리를 깔끔하게 만들 수 있다. 머지와 똑같이 진행하고 스쿼시 옵션을 주면 된다.

git checkout main
git merge --squash feature/new
git commit

squash merge를 하기 전

squash merge를 한 후