기록하는 습관.

[React] Context API 사용이유 및 용도, 유의사항, 예시코드

React의 기본적인 데이터 전달 흐름은 부모 컴포넌트(상위 컴포넌트)에서 자식 컴포넌트(하위 컴포넌트)로 전달합니다. 계층적인 컴포넌트 구조가 있을 때, 가장 하위 레벨의 컴포넌트가 가장 상위 레벨의 컴포넌트의 데이터 값을 필요로 한다면 이 값을 중간 레벨의 컴포넌트들이 넘겨줘야합니다.이는 단순히 중간 레벨의 컴포넌트가 하위 레벨 컴포넌트로 넘겨주는 역할로만 사용된다면 코드의 복잡성을 증가시켜 차후의 유지보수가 어렵게 됩니다. 이를 보완하고자 사용할 수 있는 것이 Context API입니다.STEP 1. Context APISTEP 1-1. 사용이유 및 용도, 유의사항 Context를 사용하면 기존에 props로 데이터를 전달하는 방법이 아닌 useContext()로 전달받아 하위 컴포넌트에서 사용합..

[React] List 및 key의 개념, map()함수, key의 사용목적은 렌더링 효율에 있다.

STEP 1. List와 Key일상생활에서 우리가 사용하는 키로는 주민등록번호, 학번, 핸드폰 번호, 여권번호가 있습니다. 모두다 고유하다는 값의 특징을 가지고 있습니다. 하지만 고유하다는 범위가 “대한민국”으로 한정되어 있습니다. 이는 특정 범위에서 고유하다는 말입니다.리액트에서는 고유하다는 것(고유성)을 “key”로 나타내며 이는 고유한 문자열입니다. 리액트에서의 특정 범위는 “List” 입니다. List는 key를 가지며 이는 ⭐List에서 어떤 아이템의 변경, 추가, 제거의 구분을 위해 사용합니다. 즉, 서로 다른 List에서 key값이 같더라도 영향이 없음을 말합니다.List 내에서만 고유한 값이면 됩니다.STEP 1-2 예시코드코드는 키값으로 숫자의 값을 사용합니다. 현재는 numbers 값..

React에서 클래스형 컴포넌트를 학습하며 bind() 학습에 많은 시간이 들었습니다.bind()를 학습하며 해소한 어려움을 잊지 않기 위해 기록합니다.STEP 1. 클래스형 컴포넌트의 bind()class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: true }; // 초기 상태 설정 // 이벤트 핸들러에서 `this`를 바인딩 this.handleClick = this.handleClick.bind(this); } handleClick() { // prevState를 사용해 상태를 업데이트 ..

React 학습을 통해 프로젝트를 만들려고 합니다.학습을 하며 useEffect()를 이해하는데 큰 어려움이 있었습니다.기록을 통해 학습한 내용을 잊지 않기 위해 작성합니다.useEffect()STEP 1. "useEffect는 Side effect를 분리하기 위해 사용한다." useEffect는 Side effect를 작업을 분리하기 위해 사용합니다. Side effect는 컴포넌트의 렌더링 과정 외부에서 발생하는 작업입니다. 대표적으로 API 호출(데이터를 가져오거나 보내는 작업), DOM(React 외부에서 DOM을 직접 변경하는 작업), 타이머 작업(setInterval, setTimeout을 사용하는 작업), 구독 설정 (이벤트 리스너를 등록하거나 소켓 연결 설정)이 있습니다.STEP 1-2. ..