React Programming

SSAFY(삼성 청년 아카데미) React 특강 학습 일정

일자	학습 주제
2022. 8. 8 (월)	React 라이브러리 소개
	웹 브라우저 환경에서 React 시작하기
2022. 8. 9 (화)	React 개발 환경 매뉴얼 구성
	툴체인으로 React 프로젝트 스캐폴딩
2022. 8. 10 (수)	React 훅(Hooks) API / Props 타입 검사
	React 컨텍스트(Context) API / 테마, 인증 관리
2022. 8. 17 (수)	클라이언트 사이드 라우팅 구성
	검색엔진 최적화 (SEO) / 보호된 라우트 (인증)
2022. 8. 19 (금)	Redux 아키텍처
	React 앱에 Redux 통합
2022. 8. 26 (금)	RTK 소개 및 사용법
	RTK Query 활용
2022. 8. 30 (화)	토이 프로젝트
	프로젝트 배포 (CI / CD)

---

질문/답변

질문 1

다음에 혹시 axios 방법도 다뤄주시나요?

답변 1

넵 ^^ Axios 라이브러리를 사용한 실습도 다룰 예정입니다.

질문 2-1

useCallback의 역할이 함수의 메모이제이션이라면 useCallback은 컴포넌트가 리렌더링될때 함수를 재"정의"하는 cost를 줄여주는 것인가요?

답변 2-1

네. 말씀하신대로 함수가 재 정의 되는 비용을 줄여주므로 메모리 누수를 방지할 수 있고, 나아가 불필요하게 다시 렌더링 되는 컴포넌트로 인해 성능이 저하되는 문제를 해결할 수 있습니다.

질문 2-2

dependency가 바뀌었는지 판단하는 시간도 필요할 것 같은데 이 시간이 함수를 정의하는 시간보다 짧아서 useCallback을 사용하는 것일까요?

답변 2-2

네. 말씀하신대로 함수가 재 정의 되는 비용을 줄여주므로 메모리 누수를 방지할 수 있고, 나아가 불필요하게 다시 렌더링 되는 컴포넌트로 인해 성능이 저하되는 문제를 해결할 수 있습니다.

질문 2-3

리엑트 코드를 찾아보다보면 항상 useCallback, useMemo을 사용하는 것은 아니던데 강사님은 어떤 기준으로 사용 유무를 결정하시는지 궁금합니다.

답변 2-3

하위 컴포넌트(예: <Button>)에 '함수' 타입을 prop으로 전달해야 할 때 useCallback 훅을 사용하는데 반해, 표준 HTML 요소(예: <button>)를 사용할 때는 useCallback 훅을 사용하지 않는 것이 권장됩니다. 2-2번 질문에 대한 답변에서 말씀드린 것이 우려되는 상황인데 HTML 표준 요소는 그러한 문제가 없으므로 useCallback 훅 없이 사용하는 것이 더 낫습니다. (요약: 컴포넌트에 함수 타입을 전달할 경우 훅 사용 / HTML 표준 요소에는 사용 안 함)

질문 3

클래스형 컴포넌트에서는 this가 많이 보이는 거 같은데 함수형 컴포넌트로 흐름이 바뀌면서 상대적으로 중요해진 JS 문법이 있나요?

답변 3

JS 문법도 문법이지만, 메모이제이션 패턴 활용이 주이므로 해당 패턴에 대해 이해하면 좋을 것 같습니다. 오히려 문법은 함수를 사용하는 것이 클래스 보다 간결하고 쉽습니다. ^^ 그럼에도 몇가지 생각나는 것을 나열하면 '구조 분해 할당', '나머지 매개변수', '화살표 함수 식', '배열 메서드(mutation 하지 않는)' 등 입니다.

질문 4

폴리필은 보통 바벨을 통해서 설정해 브라우저 호환성을 고려하는걸로 알고있는데 npm에서 react-app-polyfill을 사용하는게 신기했습니다. 보통의 경우, 어떤 방법이 좀더 보편적인지 CRA에서만의 특성인지 궁금합니다. 그리고 웹팩과 바벨사용법을 필요 직무 역량에 넣는 경우가 있는데 현업에서 볼때 어느정도의 이해도와 지식을 가진 신입 혹은 개발자를 원하는것인지 궁금합니다.

답변 4

보편적인 방법의 기준은 어떤 도구를 사용하는가에 따라 달라질 것입니다. react-app-polyfill은 Create React App 도구에 최적화 된 폴리필 라이브러리 입니다. 반면 core-js, regenerator-runtime 등을 사용한 폴리필(@babel/polyfill은 더 이상 사용이 권장되지 않음)은 CRA 도구에만 국한되지 않으므로 범용적으로 사용 가능합니다.

그리고 Babel, Webpack 등 도구의 필요성을 이해하고, 기본적인 사용법을 알고 있다면 좋습니다. 도구 별 사용 목적과 도구에서 제공하는 콘셉 등에 대해 바로 알고, 문제가 발생할 경우 문제를 해결할 수 있을 정도의 검색, 반영 능력이 요구될 것입니다.

질문 5

CRA를 통해 프로젝트를 진행하고 있는데 타입스크립트를 적용해 하고있습니다. 타입스크립트에 코드를 맞추는건지,, 코드를 타입스크립트로 잘 짜고 있는건지 알지 못해 답답한데 코드를 작성할때 타입을 적어놓고 작성하는지, 또 타입의 수정이 일어나는 상황에서는 어떻게 대처해야 하는지 궁금합니다

답변 5

질문은 "당신은 어떻게 하는가?"를 물어본 것이므로 순수하게 제 입장에서 답변드려 봅니다. 수업에서 말씀드렸 듯이 저는 Designer이고, Design은 "설계"를 의미합니다. 그러므로 저는 디자인을 할 때 먼저 설계를 합니다. 예를 들어 발표 자료를 디자인 해야 하는 경우, 다음 절차에 따라 구현합니다.

1. 발표 주제 이해/정리
2. 발표 방식 조사/분석/선택
3. 러프한 발표 슬라이드 작성(스토리텔링, 와이어프레임)
4. 발표 자료 무드보드 작성
5. 발표 자료에 사용 될 포토,클립아트 검색/구매 또는 직접 제작
6. 발표 슬라이드 구성(시각 디자인, 필요한 경우 애니메이션 또한 제작)
7. 발표 자료 검토/브리핑 준비
8. 발표 진행

Develop 또한 "구현을 위한 설계"가 필요하죠. 그러므로 구현해야 할 애플리케이션 UI를 분석한 후, 구현에 앞서 어떤 props를 또는 state를 관리해야 할 지 고민합니다. TypeScript를 사용한다면 유틸리티 함수 또는 클래스, 컴포넌트 설계 과정에서 어떤 타입이 필요한 지 설계하고 들어갑니다.

설계를 꼼꼼하게 잘한 경우, 예측대로 구현할 수 있어 수정이 발생하는 경우가 줄어듭니다. 대부분의 웹툰 작가가 작화 시간보다 콘티 작성에 보다 많은 시간을 할애하는 것 또한 같은 이유입니다. 콘티를 대충 그리면 작화를 그리다가 중간에 엎고 다시 그려야 하기 때문입니다. (수정... 수정... 수정...)

결론은 타입 수정이 발생하지 않도록 꼼꼼하게 UI를 분석하고, 설계하는 것을 권장합니다. 하지만 그럼에도 불구하고 수정이 발생할 수 있습니다. 그런 경우 우선 주어진 상황에 맞춰 문제를 해결하는 경험을 갖는 것이 좋습니다. 그리고 코드 리뷰를 통해 예측과 달리 수정 상황이 왜 발생한 것인지 분석하고, 다음 설계 과정에서는 같은 경험을 하지 않을 수 있도록 대비할 필요가 있습니다.

질문 6

혹시 오늘 배운 redux의 create 함수 말고 다른 create 함수(createSlice, createAsyncThunk 등..)은 따로 안 다룰 예정인가요?? 혹시 안 다룬다면 오늘 배운 createStore와 creataSlice 의 차이점이 궁금합니다!

답변 6

말씀주신 함수는 RTK의 함수 들입니다. 다음 시간에 그 함수들은 다룰 예정입니다. 우선 간단하게 이야기 드려볼께요. createStore 함수는 Redux의 Store를 생성하는 함수입니다. 그리고 createSlice 함수는 Redux를 보다 쉽게 사용할 수 있도록 initialState, reducer, action type/creators를 한 번에 관리할 수 있도록 도와주는 함수입니다. ^^