TIL2 📌 Q1. React에서 불필요한 렌더링이 발생하는 상황에는 어떤 게 있을까? 부모 컴포넌트가 리렌더링되면서 자식 컴포넌트도 전부 리렌더링 부모가 리렌더링되면, props가 변경되지 않아도 자식이 같이 리렌더링 되는 경우가 많다고 한다. props로 매번 새로운 참조값(객체, 배열, 힘수)을 전달할때 -> React.memo를 써도 의미가 없음 state를 불필요하게 크게 관리할 때 하난의 state 객체에 필드가 많아지면, 특정 필드만 변경이 되도 전체가 다시 리렌더링된다. context 과도 사용 Context Provider의 값이 조금만 바뀌어도 모든 Consumer 컴포넌트가 리렌더링된다. 불필요한 key 사용 오류 map을 돌릴 때 index를 key로 쓰면, 실제 값은 안 바뀌어도 key가 바뀌어서 전체가 리렌더링될 수 있다. 리액트에서 불필요한 리렌더링을 막기 위해서는 useMemo, React.memo, useCallback 같은 최적화 기법이나, stat…

TIL 1 📌 Q1. 왜 var 대신 let과 const를 권장할까? var는 함수 스코프를 가지기 때문에 블록 안에서 선언해도 전역/함수 밖에서도 전체에 영향을 줄 수 있다. 또한 var는 재선언이 가능하고 호이스팅시 초기에 undefined로 할당되어 예측하기 어려운 동작을 유발할 수 있다. let과 const는 블록스코프를 가지기 때문에 블록 안에서 재선언 할 수 없다. 호이스팅이 되더라도 Temporal Dead Zone (TDZ)때문에 블록 밖에서의 접근할 경우에는 에러가 발생한다. 변수가 호이스팅은 되었지만, 아직 초기화되기 전 상태에 있는 구간을 TDZ라고 합니다. 이 구간에서는 변수를 참조하려 하면 ReferenceError가 발생한다. 코드 예시 let과 const 중에서는 어떤 것을 기본으로 쓰는게 좋을까? const를 기본으로 사용하는 것이 좋다. let은 재할당이 필요한 경우에만 사용하면 되고 const를 기본적으로 사용하면 값이 변하지는 않는다는 것을 의도적…

리액트 네이티브 컴포넌트 리액트 네이티브에서 컴포넌트는 UI를 구성하는 기본 단위입니다. 웹의 React와 마찬가지로, 재사용 가능한 UI 조각을 만들 수 있습니다. 기본 제공 컴포넌트와 사용자 정의 컴포넌트로 나뉩니다. 주요 리액트 네이티브 컴포넌트: 역할과 주요 속성 1. View 역할: 레이아웃을 구성하는 가장 기본적인 컨테이너(웹의 div와 유사) 주요 속성 style: 스타일 지정 (배경색, 정렬 등) children: 내부에 다른 컴포넌트 포함 가능 2. Text 역할: 텍스트를 화면에 표시하는 컴포넌트 주요 속성 style: 텍스트 스타일 지정 (색상, 크기 등) numberOfLines: 표시할 최대 줄 수 ellipsizeMode: 텍스트가 넘칠 때 처리 방식 (‘head’, ‘middle’, ‘tail’, ‘clip’) 3. Image 역할: 이미지를 화면에 표시하는 컴포넌트 주요 속성 source: 이미지 경로(로컬 또는 uri) style: 이미지 크기, 모양…

Redux란? 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적을 관리가 가능하고 Props 없이 다른 컴포넌트에게도 상태를 전달할 수 있다. 하지만 단순히 전역 상태 관리만 하는 프로젝트라면 Context API로 충분하다고 한다. Redux 개념(1) - Action(액션) Redux에서 “액션(action)” 은 상태(state)를 어떻게 바꿔야 하는지를 설명하는 “객체” 다. 말 그대로, “이런 일이 일어났다”고 리덕스에 알리는 역할을 한다. 액션은 무조건 객체이며, 필수로 type 속성을 가져야 한다. Redux 개념(2) - Action Creator(액션 생성 함수) 액션 생성 함수(Action Creator) 는 액션 객체를 반환하는 함수입니다. 왜 액션 생성 함수를 쓸까? 코드 일관성 유지 - 액션 객체를 직접 만들지 않고, 공통된 방식으로 생성 가능 자동화/ 테스트 용…