[프론트엔드] cs 지식6 - React 편(2)

1. Redux 사용해 본 적 있습니까? Redux를 적용사례의 대해 설명하세요.

Redux는 새로 고침시 state 값을 새로 고침시 변하지 않게 하기 위해 사용합니다. 대부분은 로그인 유지 시 사용되는 편에 속하고요. 이것을 redux session 방식 혹은 redux local 방식으로 이용하여 state 값을 저장합니다.

redux session은 javascript의 sessionStorage 역할을 수행하고 있으며 브라우저 창이 닫을 시 state가 다시 초기화되는 상태를 말하고, localStorage는 서버를 내릴 때까지 지속적으로 state값이 유지되는 것을 뜻합니다.

 

2. useState()와 useEffect()의 대해서 설명하세요.

useState()와 useEffect()는 리액트 라이브러리 중 하나입니다.

Function Component에서 React 16.10.8 버전 이후로 부터 Hook이라는 기술이 등장 하였으며, Hook이란 class Component에서만 state와 componentDidUpdate 같은 역할을 하여 state 값 관리와 렌더링 관리를 Function Component에서도 사용 가능 하게끔 하여 만들어진 기술이라고 할 수 있습니다.

useState()는 state 변수를 사용 가능하게 하여 사용이 되어지는 것이고, useEffect()는 렌더링 기능을 수행할 수 있도록 하는 역할을 할 수 있습니다.

 

3. 본인은 React를 다뤄본적 있나요? 얼마나 다룰 수 있을 것 같습니까?

저는 React를 처음으로 시작한지 1년 넘게 다뤄본적 있습니다.

React를 처음 시작 하였을 때, class Component 기반으로 사용을 하였으며, Hook의 등장으로 리액트에서는 class component에서 function component 사용을 유도하여 함수형 컴포넌트에 적용하는 것의 대해 많이 애먹었습니다.

현재, React를 활용하여 reactstrap으로 부트스트랩처럼 사용이 가능하며, styled-component를 통해 직접 custom css를 작성이 가능하며, css 겹침현상을 방지하기 위해 scss를 이용하여 사용한 이력이 있습니다.

이밖에도 각 라이브러리(draft.js, fullcalendar, react-router, axios, notion, scroll, redux 등)를 사용한 이력이 있으며, 현재는 반응형 웹앱 개발이 가능한 수준으로 올라 현재는 스타벅스 클론코딩을 준비 중입니다.

차후 React에 대해 숙련이 되어진다면 고객이 원하는 프론트엔드 개발을 할 수 있는 경지까지 올라 갈 수 있습니다.

 

 

4. 본인이 한 React 프로젝트는 무엇이 있습니까?

저는 React를 이용한 프로필 개발을 하였고, TodoList를 이용하여 Redux Local을 이용하여 제작할 수 있습니다.

또한 React를 이용하여 CRUD 불가변성을 이용하여 사용자 편의성을 고려한 게시판을 만들었습니다.

마지막으로 로그인 처리를 Redux Session을 이용하여 새로고침시 유지 할 수 있도록 가능하도록 만들었습니다.

 

5. JSX란 무엇인가?

Javascript xml의 줄인 말입니다. javascript 코드를 html처럼 표현 가능하며 React element 생성하는 언어 중 하나입니다.

 

 

6. Class Component와 Function Component의 차이점

Class Component : 여러 단개 상속으로 이뤄지고, 복잡성과 오류 가능성 증가, 라이프 사이클을 가지며 각 생명주기 함수의 대해 알아야 함

Function Component : hook을 사용하며 생명주기에 원하는 동작 가능

  

 

7. React란? 컴포넌트란 무엇인가?

React는 javascript SPA 프레임워크 라이브러리 중 하나입니다.

webpack 기반으로 만들어 졌으며, Virtual DOM을 이용하여 성능 향상에 도움이 되는 기술 중 하나입니다.

Spring에 따지면 MVC 패턴에서 V만 가져온 형태이고, V란 view라는 뜻으로 view를 전문적으로 다루는 기술 중 하나입니다.

또한, axios를 통해 Back-End에서 Controller를 통해 Model 정보를 가져오는 기능을 수행 하고 있습니다.

컴포넌트란 하나의 페이지를 각각의 영역을 나누는 것을 컴포넌트라고 합니다.

쉽게 말해 전체 퍼즐 조각을 잘개 잘개 쪼개어 나타난 것을 컴포넌트라고 하며, 이를 재사용성과 확장성, 유지보수성이 뛰어난 기능을 수행하고 있습니다.

 

8. state란 무엇이고, 왜 setState를 사용해야하는가? 함수형 컴포넌트에서 어떻게 state값을 변화시키는가?

state는 React 버전으로 변수를 저장하는 영역을 말합니다.

state의 특징은 불변성을 유지해야하며, setState를 이용하여 사용합니다.

함수형 컴포넌트에서는 useState()를 이용하여 const [s, setS] = useState()를 사용하며

s라는 state 값을 변경 시킬려면 setS()를 이용하여 변경 시켜야 합니다.

만일 state를 직접 수정 할 경우, 리액트에서 render 함수를 호출하지 않으므로 state 변경 일어날 시 렌더링 되지도 않을 수 있다.