[본캠프 12주차] 월요일 TIL

01/06 일일 목표📝

 

리액트 입문 강의 듣기

디자인 집중반

 

---

 

 

📖 오늘 배운 내용

 

props에서 children 이란?

• 특별한 props로, 컴포넌트의 태그 사이에 넣은 내용을 말함.
• 부모 컴포넌트가 자식 컴포넌트에 전달하는 "내용물"
• 사용하면 컴포넌트 안에 재사용 가능한 틀을 만들고, 필요한 내용을 유동적으로 넣을 수 있어서 유용

 

children의 용도

1. 레이아웃 컴포넌트

공통된 레이아웃 구조를 정의하면서 안에 들어가는 내용을 유동적으로 바꾸고 싶을 때 사용

 

 

 

구조분해할당과 props

 

구조분해할당을 이용하여 무조건 props.title 을 이용하는게 아니라 props 객체에서 title만 분해해서 바로 사용할수 있음.

코드가 간단해지고 props.를 반복적으로 쓰지 않아도 된다.

 

 

 

state란?

1. State는 React 컴포넌트의 동적인 데이터를 관리.
2. 상태 변경은 setState 함수를 통해 이루어지며, 상태가 변경되면 자동으로 UI가 다시 렌더링
3. React의 상태 관리 개념은 컴포넌트 중심 설계와 밀접하게 연결되어, 재사용성과 유지보수를 용이

💡 State는 React의 핵심 개념 중 하나로, 변화하는 데이터를 관리하기 위해 필수적으로 알아야 하는 도구입니다!

간단하게 정리

 

불변성이란?

• 불변성은 데이터가 한 번 생성된 이후에는 변경되지 않는 성질
• 기존 데이터를 직접 수정하지 않고, 새로운 데이터를 생성해서 변경 사항을 적용하는 방식을 의미
• React에서 불변성은 상태 관리의 핵심 개념으로, 효율적인 렌더링과 예측 가능한 코드 작성을 도움.

---

 

컴포넌트?

• 컴포넌트는 리액트의 핵심
• 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성됨
• ui  구축을 훨씬 쉽게 만들어줌
• 리액트 컴포넌트가 선언체라는 개념이 중요

 

선언형 프로그래밍형 사용

"어떻게" 하는지보다 "무엇"을 원하는지를 중심으로 작성하는 방식

 

렌더링?

• 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에서 ui를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미
• 컴포넌트의 동적인요소들을 보여주면서 요청

 

ui - 음식

컴포넌트 - 주방장

리액트 - 웨이터

렌더링 트리거?

렌더링이 발생하는 경우
1 . 첫 리액트 앱을 실행했을때
2. 컴포넌트 내부의 상태가 변경되었을때
3. 새로운 props가 들어올때
4. 상위 부모컴포넌트에서 2,3번의 이유로 렌더링이 발생했을때

 

 

리렌더링?

첫 렌더링이 끝난 이후에 추가로 렌더링 트리거 하려면 상태변경을 해주면 된다.

컴포넌트가 상태에 변화가 생기면 리렌더링이 발생

 

1. 주방예시로 하면 음식점 손님이 다시 추가주문하는 상황과 같다.

2. 새로운주문(리렌더링)이 일어나면 컴포넌트는 토대로 다시 새로운 요리를 만듬

3. 새롭게 만들어진 요리는 리액트에 의해 다시 돔에 반영

브라우저 렌더링?

• 브라우저 렌더링과 리액트의 렌더링은 다른 프로세스이다.
• 리액트에서 렌더링이완료되고 돔에 업데이트된 후 브라우저는 화면에 그림을 그린다.
• 둘을 혼동하는것을 피하기 위해서 페인팅(painting)이라고도 한다.

---