🗓️ 주간요약 (2025.08.18~08.22)
React기초 (Hook), Typescript기초, Python 기초 (변수, 데이터 타입, 컬렉션 타입, 연산자, 조건문, 반복문)에 대해 배웠다.
☑️ 필수 리액트 Hook
useState : 상태를 직접 수정하는 것이 아니라, 상태 업데이트 함수를 호출하여 상태 변경한다. 기존상태를 업데이트할 때는 PrevState를 사용한다.
useEffect : 렌더링 후 실행되는 부수 효과(사이드 이팩트)를 처리한다. 빈배열 []을 삽입하면 마운트 시 한번 실행, 생략하면 업데이트될 때마다 호출, 의존성 배열[state]안에 있는 변수가 변경되면 실행한다.
useMemo : 의존성 배열에 들어있는 변수가 변했을 때에만 새로 함수를 호출하여 결과값을 반환한다.
useCallback : 함수를 메모이제이션(Memoization)하는 hook이다.
useRef : 레퍼런스(참조, 특정 컴포넌트에 접근할 수 있는 객체)를 사용하기 위한 훅이다. 단순히 DOM 요소나 값을 저장할 때 사용한다.
useReducer : 컴포넌트 상태를 관리하기 위한 훅이다. 복잡한 상태 관리 로직이 필요할 때 사용한다.
useContext : Context API를 쉽게 사용할 수 있게 해주는 훅이다.
React.memo : 컴포넌트를 메모이제이션하는 함수이다. props가 바뀌지 않으면 컴포넌트를 다시 렌더링하지 않도록 막아주는 최적화 도구이다. useCallback, useMemo와 같이 쓰인다.
Callback ref : ref를 함수로 전달하는 방식이다. 마운트/언마운트 시점에 추가 동작이 필요할 때 사용한다. useCallback, useRef와 함께 쓴다.
Context API :컴포넌트 트리 내에서 상태나 데이터를 전역적으로 공유하기 위해 사용한다. useContext, 필요 시 useReducer/useState와 함께 쓰인다.
☑️ Memoization 의 개념과 React 에서의 활용 방식 정리
memoization은 기존에 수행한 연산의 결과값을 저장해두고 같은 입력이 들어오면 재활용하는 기법이다. 따라서 불필요한 연산을 줄여 성능을 최적화할 수 있다. == 함수의 결과값 저장 기법
위에서 살펴보았던 훅에서 메모이제이션을 통해 불필요한 연산과 리렌더링을 최소화해서 성능을 최적화할 수 있다.
useMemo: 값 메모이제이션
useCallback: 함수 메모이제이션
React.memo: 컴포넌트 메모이제이션
☑️ Throttling과 Debouncing에 대해 알아보기
Throttling: 이벤트가 연속적으로 발생하더라도, 일정 주기마다 한 번씩만 실행되게 하는 기법이다. 즉, 일정 주기로 실행된다.
Debouncing: 이벤트가 연속적으로 발생하면, 마지막 이벤트가 끝난 후 일정 시간이 지난 뒤에 단 한 번만 실행되게 하는 기법이다. 즉, 마지막 입력만 반영된다.
☑️ Python 수업에서 기억하고 싶은 개념들
- 변수를 선언할 때에는 가독성있고, 변수명은 의미있게 지어야하며 변수가 비공개인 경우 밑줄_로 시작한다.
- 임시 변수 사용없이 변수 값의 교환이 가능하다.
- 값 자체를 저장하는 것이 아니라, 값이 저장된 메모리 주소를 참조한다.
- 동적 타입 지정을 사용하므로 같은 변수에 다른 타입의 값이 저장될 수 있다.
- 실수를 저장할 때는 2진수로 숫자를 저장하므로 소수점 이하 숫자를 정확하게 표현하지 못한다. 따라서 round(반올림), decimal 모듈(정확한 10진수 연산), math 모듈의 isclose 함수를 사용할 수 있다.
- and 연산자는 첫 값이 False면 두 번째 값은 평가하지 않고 바로 False 반환한다.
- or 연산자는 첫 값이 True면 두 번째 값은 평가하지 않고 바로 True 반환한다.
- 리스트는 다양한 데이터 타입을 혼합할 수 있어서 리스트 안 리스트도 포함 가능하다.
- enumerate는 반복 가능한 객체의 요소를 인덱스와 함께 순회할 수 있게 해주는 파이썬 내장 함수이다. 인덴스와 값을 함께 추출하며 (인덱스, 요소) 형태의 튜플을 반환한다.
- zip()은 두 리스트의 요소를 순서대로 짝 지어 튜플로 만든다.
- 튜플은 데이터가 변경 불가능하며, 리스트보다 메모리를 적게 사용하고 생성/ 접근 속도가 빠르다.
- 컴프리헨션(Comprehension)을 사용하면 리스트, 딕셔너리, 집합 등을 짧고 간결하게 생성할 수 있다.
- 거듭제곱 연산자, 단항 연산자, 할당 연산자는 우 → 좌 결합성을 가진다.
📒 실습/프로젝트를 통한 개념 정리
❗️실습1 ) (React) 개별적으로 관리됐던 state를 통합적으로 변경해보기
npx create-react-app my-app : 패키지 자동 설치, my-app 폴더 생성
cd my-app : my-app 폴더로 이동
useState를 각각 사용하여 score와 name을 별도로 관리
setScore()또는 setName()을 각각 호출하여 단순히 값만 변경 가능
브라우저에서 최종적으로 보이는 것은 index.js에서 App을 불러와 렌더링하기 때문에 App.js는 위와 같아야 한다.
useState로 객체 ({ score, name })하나에 모든 상태를 저장
setState(prevState => ({
...prevState, 변경할 값 }))형태로 스프레드 연산자(...)를 사용해야 함
상태가 단순하고 독립적이라면 -> 첫 번째 코드처럼 개별적 관리가 더 직관적이고 간단
상태가 많고 서로 관련된 값이라면 -> 두 번째 코드처럼 통합적 관리가 더 효율적
💭 이번 주 회고
짧은 시간 안에 HTML, CSS, JS, React의 개념을 습득하는 것이 어려웠다. 응용까지 하려면 많은 시간이 필요했는데 쏟아지는 진도에 따라가는 게 벅찼던 것 같다. 배웠던 내용임에도 실습까지 끝내려면 시간이 부족했다. 그날 배운 개념은 그날 체화하는 게 방법인 것 같아 다음에 배울 주제부터는 전략적으로 공부를 해야겠다.
모르는 문제를 끝까지 붙잡고 생각하는 성격이 있는데, 아직은 배우는 단계이기 때문에 고집을 내려놓고 배우면서 이해하고 넘어가야 시간을 아끼면서 공부할 수 있는 것 같다. 너무 시간을 많이 잡아먹는다 싶으면 질문을 통해 배워나가는게 학생으로서 좋은 자세라는 생각이 들었다.
본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 2기(B-log) 리뷰로 작성 되었습니다.
#카카오클라우드 #AIaaS마스터클래스2기 #AIaaS #카카오엔터프라이즈 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #개발자교육 #클라우드개발자 #클라우드엔지니어
