20231211 TIL

Today 요약

[✅] 코딩테스트 1문제 

[✅]  react 기초 개념 강의 (2개)

---

배운 점

1) react

1-1 컴포넌트

• 재사용 가능한 UI 요소로 나타내는 기본 단위 
• 각 컴포넌트는 자체적인 상태(state)와 라이프사이클 메소드를 가질 수 있으며, 부모 및 자식 컴포넌트와 함께 조합가능
• UI를 재사용해 유지보수가 용이

1-2 라이프 사이클

• 컴포넌트의 라이프사이클은 생성되고 삭제될  때일어나는 다양한 단계
• 마운트(Mountion) 
  • constructor() : 생성될 때 호출 초기 상태 설정 및 이벤트 핸들러 등 초기화 
  • render() : 컴포넌트가 ui 렌더링하는 메소드 
  • componentDidMount() : 실제 DOM에 삽입된 후에 호출되는 메소드, 추가 데이터 로딩이나 외부 리소스 요청 
• 업데이트(Updation)
  • shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 하는지 결정하는 메소드, 성능 최적화 
  • render() : 컴포넌트가 UI를 업데이트 
  • componentDidUpdate : 컴포넌트의 업데이트가 완료된 후 호출되는 메소드, 이전 상태나 프롭스와 현재 상태, 프롭스를 비교해 필요한 작업 수행
• 언마운트(Unmountion)
  • componentWillUnmount : 제거되기 전에 호출되는 메서드, 이벤트 리스너 해제나 타이머 제거 등의 정리 작업을 수행하는데 사용 된다

1-3 Props

• react 컴포넌트 간에 데이터를 전달하는데 사용되는 객체   
• 데이터 값(속성) 

1-4 state

• 컴포넌트가 내부적으로 관리하는 상태를 나타내며, 컴포넌트의 속성값을 저장, 변경할 수 있는 객체

1-5 spa (싱글 페이지 애플리케이션)

• 웹 애플리케이션의 일종으로, 하나의 HTML 페이지를 기반으로 하여 필요한 모든 리소스를 동적으로 로드, 사용자와의 상호작용에 따라 페이지를 업데이트 하는 형태의 웹 애플리케이션
• 단일 페이지 로딩 : 초기에  모든 필요한 리소스 로드, 그 후 필요한 데이터만 비동기적으로 로드
• 사용자 경험 향상 : 페이지간 전환이 필요한 경우 화면 깜빡이거나 새로 고쳐지는 현상이 없어 부드러운 사용
• 효율적인 데이터 관리 : 데이터를 서버에서 가져와 필요한 부분만 업데이트, 효율적이다 
• 빠른 로딩 속도 : 초기 로딩 이후에는 필요한 데이터만을 동적으로 로드하기 때문에, 사용자는 필요한 페이지에 빠르게 접근 가능하다 
• 개발 용이성 : 독립적 개발 가능