hooney.log

리액트를 쓰다 보면 "렌더링"이라는 말을 자주 접하게 된다. 하지만 리액트의 렌더링 과정은 단순히 return 하는 걸로 끝나는 게 아니다. React의 내부 렌더링은 두 단계, Render Phase와 Commit Phase로 나뉘며, 이 둘을 명확히 이해해야만 예상치 못한 사이드 이펙트나 성능 문제를 피할 수 있다. 이번 포스팅에서는 이 두 단계가 각각 무엇을 하는지, 왜 나뉘어 있는지, 개발 시 주의할 점은 무엇인지까지 깔끔하게 정리해본다. 🎬 리액트 렌더링 프로세스의 큰 그림리액트의 렌더링은 다음과 같이 이루어진다: - Render Phase (렌더 단계): 어떤 UI를 보여줄지 계산하는 단계 - Commit Phase (커밋 단계): 계산된 결과를 DOM에 실제 반영하는 단계 이 둘..

React로 리스트를 렌더링하다 보면 .map() 안에서 key 값을 필수로 지정하게 된다. 이때 초보자부터 숙련자까지 흔히 하는 실수가 바로 index를 key로 사용하는 것이다. // 흔히 하는 실수items.map((item, index) => {item.name}); 간단해 보이지만, 이 코드는 예기치 않은 버그의 원인이 된다. 이번 포스팅에서는 왜 index를 key로 쓰면 안 되는지, 그리고 어떨 때는 써도 되는지를 예제와 함께 정리해본다. 📌 key란 무엇인가? React는 리스트를 렌더링할 때 어떤 항목이 추가되었는지, 삭제되었는지, 혹은 순서가 바뀌었는지를 파악하기 위해 key라는 식별자를 사용한다. 이 key는 각 요소를 고유하게 식별해야 하고, 이를 기반으로 효율적으로 DOM..

제목 어그로 통했나요? GPT의 작품입니다.  간단하게 next & typescript로 프로젝트 생성 알아보겠습니다.   1. 프로젝트 생성 명령어npx create-next-app@latest --ts next-study  이렇게 하면 최신 버전의 nextjs와 typescript를 이용해서 프로젝트가 생성됩니다.    2. 취향 정하기 위 명령어를 입력하면 몇 가지 질문을 합니다.하나씩 알아보면- Would you like to use ESLint? ... No / YesESLint를 사용할거야? - YES! - Would you like to use Tailwind CSS? ... No / YesTailwind CSS 사용할거야? - YES! - Would you like your code ins..

타입스크립트 기초 1. 옵셔널 체이닝 옵셔널 체이닝을 사용하면 충접된 객체의 속성이 존재하는가에 관한 조건 분기를 간단하게 할 수 있다. interface User { name: string, social?: { facebook: boolean twitter: boolean } } let user: User user = { name: 'aaa', social: { facebook: true, twitter: true } } console.log(user.social?.facebook); // true user = { name: 'aaa' } console.log(user.social?.facebook); // undefined 2. None-Null 어서션 연산자 컴파일 옵션 --strictNullChe..

타입스크립트 기초 1. Enum 타입 Enum을 사용하면 이름이 붙은 상수 Set을 정의할 수있다. JS에는 없는데 유용하다. // 기존에 이렇게 사용 하던 것을 const aaa = { 'bbb': '1', 'ccc' : '2', } // 이렇게 사용 할 수 있다. enum Aaa = { BBB,CCC } const ddd: Aaa = Aaa.BBB; console.log(ddd); // 1 2. 제네릭 타입 제네릭은 클래스와 함수에 대해, 그 안에서 사용하는 타입을 추상화해 외부로부터 구체적인 타입을 지정할 수 있는 기능. // T는 클래스 안에서 사용하는 임시 타입 이름. class Aaa { private bbb: T[] = []; push(item: T) { this.bbb.push(item);..

타입스크립트 기초 1. 타입 추론 타입스크립트에서는 명시적인 변수의 초기화를 수행하면 타입 추론을 통해 자동적으로 타입이 결정된다. const aaa = 10; console.log(age.legnth); // error! aaa는 number타입이므로 length 속성이 없음. 2. 타입 어서션 타입스크립트가 구체적인 타입을 알 수 없는 경우 타입을 정해줄 수 있다. const aaa: any = 'aaa'; const bbb: number = aaa as number; 다른 언어의 타입 캐스트와 비슷하고, 런타임 시 영향이 없으며 컴파일 과정에서만 사용한다. 3. 타입 앨리어스 타입 앨리어스는 타입 지정의 별명을 덧붙이는 기능이다. type 타입명 = 값 type Aaa = string 타입명은 보통..

타입스크립트 기초 1. 변수 변수 선언에는 var, let, const 사용 // var 변수: 타입 = 값 // let 변수 : 타입 = 값 // const 변수 : 타입 = 값 // ex let aaa = aaa; let bbb: string = bbb; const ccc = 1; 2. 원시타입 원시타입(primitive type)인 string, number, boolean은 타입스크립트에 대응하는 타입이 있음. 타입이 한번 정해지면 다른 값 대입이 안됨. let aaa: number = 1; let bbb: boolean = false; let ccc: string = 'ccc'; aaa = 'aaa'; // X bbb = 200; // X 3. 배열 배열도 타입지정하면 지정된 타입만 추가가 가능..

리액트 네이티브 버전 : "react-native": "0.69.2" 드랍다운(Dropdown) 사용하기 라이브러리를 활용하여 드랍다운을 사용해봤다. 웹개발을 할 때는 HTML에서 기본으로 제공하는 건데, 리액트 네이티브는 라이브러리를 설치해서 사용해야했다. npm i react-native-dropdown-picker 명령어로 설치하면 "react-native-dropdown-picker": "^5.4.3" 버전이 설치 된다. - 예시 코드 const [open, setOpen] = useState(false); const [value, setValue] = useState(null); const [items, setItems] = useState([ {label: '보기1', value: '1'}, ..

리액트 네이티브 버전 : "react-native": "0.69.2" 라이브러리를 활용하여 현재 위치의 경도, 위도를 가져와봤다. npm i @react-native-community/geolocation 로 설치하면 "@react-native-community/geolocation": "^3.0.3" 버전이 설치된다. 안드로이드와 iOS 설정을 해줘야 한다. - iOS ios 폴더에서 pod install 후 Info.plist에 NSLocationWhenInUseUsageDescription 을 찾아서 아래 코드를 넣어준다. NSLocationAlwaysAndWhenInUseUsageDescription NSLocationAlwaysUsageDescription - Android andriodMani..

React Native AsyncStorage 사용하기 현재 개발하면서 사용하는데, 자꾸 console로 찍어 보면 이상하게 나와서 사용법을 정리해보려고 한다. 일단 AsyncStorage는 웹에서 사용하는 LocalStorage와 같은 기능을 한다고 생각하면 편하다. 리액트나 리액트 네이티브에서는 상태관리하는 라이브러리들이 있는데, 난 일단 Context를 사용한다. 그리고 로그인 토큰을 보관하기 위해서 AsyncStorage를 사용한다. 상태관리로 하면 앱이 종료되었을 때는 초기화가 되기 때문에 자동 로그인을 위해서 AsyncStorage를 사용한다. 1. 저장 AsyncStorage.setItem('key', value); 자바의 맵 처럼 키, 밸류 방식으로 저장하고 사용한다. 혹시 String 값..