<WIL> REACT 기초 입문

드디어 주특기 입문 주차에 진입했다. 그동안 배운 것은 모두 이번 주를 위한 준비엿다. 드디어 리액트라고하는 주특기의 상자를 열어보는 날이 찾아온 것이다.

리액트는 메타(구 페이스북)에서 설계한 오픈 소스 JavaScript 라이브러리입니다. UI, UI 구성요소를 구축하는데 사용됩니다.

SPA(Single Page Application) 아키텍쳐

한 개의 페이지로 이루어진 애플리케이션으로 MPA(Multi Page Application)과는 상반된 개념입니다.

리액트는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로써 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다.

SPA의 장점과 단점

SPA는 많은 장점을 가지고 있습니다. 대표적인 장점은 다음과 같습니다.

1. 빠른 사용자 경험: SPA는 페이지 새로고침 없이 필요한 데이터만 동적으로 로드하기 때문에 사용자는 페이지를 이동할 때마다 서버에서 리소스를 새로 로드하는 데 걸리는 시간을 기다릴 필요가 없습니다.
2. 높은 성능: SPA는 클라이언트 측에서 데이터를 처리하고 렌더링하기 때문에 서버에서 처리하는 부하가 줄어듭니다. 또한, SPA는 필요한 자원만 로드하므로 필요하지 않은 자원을 로드하는 데 소요되는 시간과 대역폭을 줄일 수 있습니다.
3. 유지보수 용이성: SPA는 서버와 클라이언트의 역할이 분리되어 있으므로, 클라이언트와 서버 개발자가 독립적으로 작업할 수 있습니다. 또한, SPA는 모듈화된 코드를 사용하므로 코드 유지보수가 용이합니다.

장점만 있는 것은 아니기 때문에 단점도 존재합니다.

1. 초기 로딩 시간: SPA는 애플리케이션에 필요한 모든 자원을 최초 한 번에 다운로드해야 합니다. 이로 인해 초기 로딩 시간이 오래 걸릴 수 있습니다.
2. SEO (Search Engine Optimization) 문제: SPA는 일반적으로 검색 엔진에 노출되지 않는 문제가 있습니다. SPA는 페이지 내용을 동적으로 생성하기 때문에 검색 엔진 크롤러는 페이지 내용을 인식하지 못합니다.
3. 보안 문제: SPA는 클라이언트 측에서 모든 데이터 처리가 이루어지기 때문에 보안 문제가 발생할 수 있습니다. 클라이언트에서 처리하는 로직은 쉽게 해킹될 수 있으며, 서버에서 필요한 데이터를 모두 전달하기 때문에 데이터 노출 위험이 있을 수 있습니다.

당연하 이러한 장점은 적극 활용하고 단점은 완화하거나 없앨 수 있도록 다양한 기법이 존재할 것입니다. 그 부분은 나중에 학습하기로 하고 지금은 기본기에 집중하려합니다.

State

리액트에서는 State는 컴포넌트 내부에서 관리되는 데이터를 의미합니다. 컴포넌트의 state는 해당 컴포넌트에 의해 관리되며, 이 데이터가 변경될 때마다 React는 해당 컴포넌트를 다시 렌더링합니다.

그러면 컴포넌트가 무엇일까요??

컴포넌트는 두 가지 타입이 있습니다. 함수형 컴포넌트와 클래스형 컴포넌트입니다. 리액트 공식 문서에서도 함수형 컴포넌트를 권장하고 있으므로 함수형 컴포넌트를 위주로 학습하게 될 예정입니다.

컴포넌트는 UI를 구성하는 블록 단위로 생각할 수 있습니다. 컴포넌트는 입력받은 데이터를 받아들여 DOM 요소나 다른 컴포넌트를 반환하도록 만들어집니다.

컴포넌트는 재사용 가능하게 만들 수 있어서, 반복되는 코드를 피하고 각각의 컴포넌트를 더욱 독립적으로 개발할 수 있습니다. 또한, 컴포넌트는 특정 부분의 UI에 대한 로직을 캡슐화할 수 있어서 코드의 유지보수성을 높여줍니다.

Props

Props는 컴포넌트간 데이터를 전달하기 위한 매커니즘입니다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이며, 컴포넌트 내부에서 변경할 수 없습니다.

부모 컴포넌트는 자식 컴포넌트를 생성할 때 props를 전달합니다. 자식 컴포넌트는 이 props를 읽기 전용으로 접근할 수 있으며, 이 props를 사용하여 자신의 렌더링 결과를 결정할 수 있습니다.

복수의 props를 전달 받은 경우 {}로 감싸 구조분해할당을 사용하면 상대적으로 편하게 사용할 수 있습니다.

리액트의 리랜더링 발생 조건

리액트는 Virtual DOM을 사용하여 컴포넌트가 업데이트될 때 최소한의 변경사항만을 실제 DOM에 반영하여 성능을 최적화합니다. 따라서, 불필요한 리랜더링을 줄이는 것이 성능 향상에 도움이 될 수 있습니다.

아래 리랜더링 조건을 숙지하면 불필요한 리랜더링을 최소화할 방법을 고민해볼 수 있습니다.

1. 컴포넌트가 마운트될 때: 컴포넌트가 DOM에 처음으로 추가될 때는 렌더링이 발생합니다.
2. 컴포넌트가 props를 받았을 때: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 props 값이 변경되면 리랜더링이 발생합니다.
3. 컴포넌트의 state가 변경되었을 때: setState 함수를 호출하여 컴포넌트의 state 값을 변경하면 리랜더링이 발생합니다.
4. 부모 컴포넌트가 리랜더링되었을 때: 부모 컴포넌트가 리랜더링되면, 자식 컴포넌트들도 함께 리랜더링됩니다.
5. 컴포넌트의 forceUpdate() 메소드가 호출되었을 때: forceUpdate 함수를 호출하여 강제로 컴포넌트를 리랜더링할 수 있습니다.

다양한 조건이 있지만 기본적으로는 처음 컴포넌트를 마운트했을 때, State 값이 변경되거나, 부모 컴포넌트가 리랜더링 되면 자식 컴포넌트들도 함께 리랜더링 된 다는 것을 알 수 있습니다.

보통 부모 컴포넌트가 리랜더링 되었지만 자식 컴포넌트는 변경된 사항이 없어 리랜더링이 불필요한 경우가 생기는 것을 상상할 수 있을 것 같습니다.

이러한 경우에 불필요한 리랜더링을 막기 위해서 React.memo 함수를 활용하여 컴포넌트를 메모이제이션하는 방법이 있습니다. React.memo 함수는 이전에 렌더링된 결과를 캐시하여 props가 변경되지 않으면 불필요한 리랜더링을 막아줍니다.

이 밖에도 다양한 방법이 있지만 불필요한 리랜더링을 막기 위해 무분별하게 사용하면 오히려 불필요하게 많은 메모리를 사용하여 성능 문제가 발생할 수 있습니다. 따라서 꼭 필요한 곳에서만 사용할 수 있도록 랜더링 조건을 확실하게 이해할 필요가 있습니다.

결론

사실 이 번주에는 이보다 더 많은 것을 학습했지만 모두 이해한 것은 아닙니다. 그러나 반드시 이번주에는 이것만큼은 이해하고 넘어가야겠다고 생각되는 것들을 정리해 보았습니다.

리액트는 컴포넌트라는 블록을 만들고 이를 쌓아 개발하는 라이브러리이며, 이러한 컴포넌트를 동작하도록 해주는 것이 State와 Props, 이들의 값이 변경되면 리랜더링 되므로 리랜더링 조건을 컨트롤해서 최적화해야하는 것 까지는 확실하게 기억할 수 있도록 해야겠다.