React의 state와 props에 대해서 설명
state는 변할 수 있는 데이터를 의미합니다.
props는 변하지 않는 값이면서 부모 컴포넌트에서 전달받은 값입니다.
애플리케이션 구조에서 변할 수 있는 값이라면 React의 상태(state)로 적절합니다. 토글, 체크박스, input value를 대표적 예시로 들 수 있습니다.
props는 읽기 전용 객체입니다. props는 중간에 변경하는 것을 권장하지 않고, 상태 끌어올리기를 통해 상태를 변경시키고 변경된 상태값을 props로 내려주어 side effect를 최소화 시킵니다.
React 컴포넌트의 key 속성에 대해서 설명
key 속성은 컴포넌트 여러개를 렌더링할 때, 다른 컴포넌트임을 구분하기 위해서 사용하는 속성입니다.
예를들어, 100개의 게시글 중 하나만 변경되었을 때, 해당 게시글만 새로 재렌더링하고 다른 게시글은 그대로 둘 수 있게 하는 것입니다. 이렇게 key 속성을 활용하면 DOM 보다 더 빠르게 렌더링할 수 있습니다.
리액트는 key 프로퍼티값을 기준으로 각 컴포넌트들을 인식합니다. 따라서 컴포넌트의 key 프로퍼티 값을 state로 주게되면 상태변화를 통해 여러개의 컴포넌트가 있는 것 같은 효과를 줄 수 있습니다.
useEffect 의 dependency array 에 대해서 설명
useEffect 는 dependency array의 요소에 해당하는 상태가 변경될때 마다 실행됩니다.
useEffect란 컴포넌트 내에서 side effect를 실행할 수 있게 하는 hook입니다. 첫번째 인자로 콜백함수를 받고, 두번째 인자로 배열을 받는데 이 배열을 dependency array라고 합니다.
uesEffect는 화면에 첫 렌더링 될 때와 종속성 배열의 value값이 바뀔 때마다 실행됩니다.(특정 state에 관한 side effect 를 실행시킬 수 있음)
dependency array가 빈 배열인 경우는 해당 컴포넌트 첫 렌더링 시에만 실행, dependency array가 아예 없는 경우는 모든 상태가 변경 될 때 렌더링 될 때마다 실행됩니다.
useRef가 필요한 상황을 예시를 들어 설명
가장 대표적인 예시는 특정 요소에 포커스를 설정해야하는 상황을 들 수 있습니다.
useRef는 특정 요소의 DOM 주소값을 가져오는 React Hook입니다. React는 기본적으로 DOM에 직접 접근하는 것을 금지하고 있습니다. React는 가상 DOM을 사용해서 SPA를 구현하기 때문입니다. 그럼에도 DOM에 직접 접근해야하는 예외 상황들이 있습니다.
DOM 엘리먼트의 주소값을 활용해야 하는 경우로, 특정 요소에 포커스를 설정해야하는 상황이 있습니다.
이럴 때 useRef를 사용해서 DOM 주소 값을 받아와 사용할 수 있습니다. 이를 통해 불필요한 렌더링을 예방할 수 있습니다.
하지만 DOM에 직접 접근하는 것은 React의 작동 방식과 맞지 않기 때문에, 이런 예외적인 상황일 때에만 사용하는 것이 좋습니다.
Styled Components를 사용해보면서 느낀 장점
class와 id 이름을 신경 쓸 필요가 없고, 컴포넌트별로 CSS내용을 찾기 쉬우며, 다른 컴포넌트와 스타일 속성이 겹치는 일을 방지할 수 있습니다.
Styled Components는 CSS 파일을 따로 작성할 필요 없이 컴포넌트 단위로 스타일 속성을 작성할 수 있게 해주는 라이브러리입니다.
크게 세 가지 장점을 꼽을 수 있습니다.
첫번째, class, id 이름을 신경쓸 필요가 없습니다. Styled Components를 사용하면 CSS 코드가 작성된 컴포넌트가 곧 스타일을 적용할 컴포넌트이기 때문에 class와 id를 사용해서 요소 특정할 필요가 없습니다.
두번째, 컴포넌트별로 CSS 내용을 찾는 게 간편합니다. CSS 파일을 작성할 필요가 없기 때문에 CSS 파일을 관리할 필요도 없기 때문입니다.
셋째, 다른 컴포넌트와 스타일 속성이 겹쳐는 일이 방지할 수 있습니다. CSS 파일을 작성하다보면 같은 종류의 요소에 같은 종류의 스타일 속성을 작성하게 되어 내가 의도한 바와는 다른 화면이 나오기도 합니다. 하지만 Styled Components는 컴포넌트 단위로 스타일 속성을 작성하기 때문에 속성이 겹치는 상황을 막을 수 있습니다.
Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가
Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다. 효율성을 위해 사용합니다.
실제 DOM을 조작하면 전체 노드들을 처음부터 다시 그려내야하기 때문에, 자원을 소모하게 됩니다.
그러나 가상돔을 사용하면, 변경된 요소 및 노드만 파악하여 한번에, 빠르게 브라우저에 렌더링 해줄 수 있습니다.
Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다.따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.
이는 빠른 로딩속도로 사용자 경험을 증대시킬 수 있습니다.
Class Component와 Function Component의 차이점
Class Componet는 Function Component가 생기기 이전에 존재하던 컴포넌트 형식입니다. Class Component는 Function Component와 달리 컴포넌트를 확장해서 써야만 했습니다.
Class Component는 뒤에 extends Component를 확장한다고 명시해야만 class Component를 사용할 수 있습니다.
그러나 Function Component는 순수 함수이기 때문에 이러한 확장 과정을 거치지 않고도 컴포넌트를 만들 수 있습니다.
또한 Class Component는 React 수명 주기 메서드를 사용해 React Life Cycle을 세밀하게 조작할 수 있고,
Function Component는 React 수명 주기 메서드 대신 React Hook을 사용하여 상태 값을 사용하거나 최적화할 수 있도록 했습니다.
React Hook의 사용 규칙에 대해 설명
- 리액트 함수의 최상위에서만 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 우려가 있습니다.
- 오직 리액트 함수 내에서만 사용되어야 합니다. 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 됩니다.
애초에 Hook은 React의 함수 컴포넌트 내에서 사용되도록 만들어진 메소드이기 때문에 일반 JavaScript 함수 내에서는 정상적으로 돌아가지 않습니다. 따라서 반드시 준수해야 하는 규칙입니다.
