분류 전체보기111 [ React ] 컴포넌트 상태 관리 :: State란, 왜 setState()로 state를 변경해야 할까? State란? state란 컴포넌트의 변경 가능한 데이터를 관리하는 데 사용되는 자바스크립트 객체. 컴포넌트의 상태를 저장하고 변경할 수 있다. 데이터에 변화가 생기면 리렌더링을 통해 화면에 업데이트 된다. 클래스 컴포넌트에서 state 사용하기 import React, { Component } from 'react'; // Counter라는 클래스 컴포넌트 class Counter extends Component { constructor(props) { //생성자, 클래스 생성될 때 실행되는 함수 super(props); this.state = { //현재 컴포넌트의 state 정의 count: 0 }; } //setState()를 호출해 새로운 상태 설정 addCount = () => { this.s.. 2023. 8. 8. [ React ] 리액트 컴포넌트와 props :: 데이터 전달 및 재사용 가능한 UI구성 리액트 컴포넌트란? 컴포넌트는 UI의 구성요소로 화면에 보여지는 작은 조각들을 나타낸다. 작은 조각 컴포넌트들이 모여 하나의 컴포넌트를 구성하고 그런 컴포넌트들은 페이지를 구성한다. 컴포넌트를 사용해 UI를 독립적이고 재사용 가능한 모듈로 나누어 개발할 수 있다. render / state / props 로 구성되어 있다. 모든 리액트 컴포넌트는 Pure 함수 같은 역할을 해야 한다. (동일한 props와 state에 대해 항상 동일한 결과를 반환해야 한다) 기능 단위로 구분하는 것이 좋고 재사용 가능 로직이나 코드들은 재사용 하는 것이 좋다. 재사용할 일이 없어도 작은 단위로 단일한 책임을 가질 수 있도록 분리해서 나누는 것이 좋다. 컴포넌트 생성하기 - 리액트에서 컴포넌트를 생성하는 방법에는 Reac.. 2023. 8. 5. [ React ] 리액트의 Render에 대하여:: Virtual DOM과 리렌더링 Recat의 렌더링 과정 1. 데이터 변경 감지 Data Change (State/Props) React는 상태(State)와 속성(Props)를 모니터링해 데이터의 변경을 감지한다. 상태가 변경되거나 부모 컴포넌트로부터 새로운 속성을 받았을 때, React는 컴포넌트를 리렌더링해야 할 필요가 있는지 확인한다. 2. 가상 DOM 생성 Createing Virtual DOM 데이터 변경이 감지되면, React는 가상 DOM을 생성한다. ***가상 DOM ( Virtual DOM ) 메모리 상에 존재하는 가벼운 복사본으로 실제 DOM과 유사한 계층 구조를 갖는다. 가상DOM은 실제 DOM과 동기화 되지 않고 독립적으로 존재한다. 3.가상 DOM 비교하기 Comparing Virtual DOM 이전에 생성된 .. 2023. 8. 5. [ React ] HTML 같기도 하지만 JSX라고 합니다. JSX란 무엇인가? JSX란 무엇인가요? JavaScript XML의 약자로 JavaScript와 XML(또는 HTML)을 조합한 문법. JSX란 자바스크립트 표현식을 확장한 문법으로 리액트에서 컴포넌트의 UI를 표현하는데 사용한다. HTML과 유사한 형태지만 자바스크립트로 컴파일되어 가상 DOM을 생성하는 데 쓰인다. JSX는 어떻게 쓸까요? JSX는 자바스크립트 코드 안에서 중괄호 {}로 감싸서 사용한다. import React from 'react'; function Introduce(props) { return Hi, my name is {props.name}!; } const element = ; 이를 통해 리액트 컴포넌트에서 동적인 값을 쉽게 출력하고 조절할 수 있다. JSX의 원리 JSX는 바벨(Babel)과 .. 2023. 8. 5. [ JavaScript ] Set, 중복된 값을 허용하지 않는 고유한 값을 저장하는 자료구조 오브젝트 v2 에는 찜하기 버튼과 내가 찜한 콘텐츠를 볼 수 있도록 했다. 유저별로 각각 찜을 할 수 있고 개별로 '내가 찜한 콘텐츠'에 목록이 나타난다. 내가 찜한 콘텐츠에 찜한 영상 목록을 넣을 때 중복된 요소를 자동으로 제거해준다는 아주 편리한 자료구조인 Set 에 대해 알아보자. Set Set이란 자바스크립트에서 제공하는 내장 객체로 고유한 값을 가지는 집합을 나타내는 자료구조이며 Set은 값의 순서를 유지하며 중복된 값을 허용하지 않는다. Set 객체 생성하기 new Set() const set = new Set(); Set 메서드 add(value) Set에 값을 추가한다. 이미 존재하는 값이면 무시됨. delete(value) Set에 값을 제거한다. has(value) Set에 특정 값을 .. 2023. 8. 4. [ JavaScript ] insertBefore()보다 더 편리하게 쓸 수 있는 insertAdjacentElement(), 특정 위치에 요소 추가하기 insertAdjacentElement() DOM요소에 새로운 요소를 특정 위치에 추가하는 기능을 제공하는 메서드. ( * 'adjacent: 인접한'이란 뜻으로 아마 인접한 위치에 요소를 추가하기에 ) element.insertAdjacentElement(position, newElement); element 기준이 되는 요소 position 새로운 요소를 추가할 위치를 지정하는 문자열 - beforebegin 요소 바로 앞에 추가 - afterbegin 요소의 첫 번째 자식으로 추가 - beforeend 요소의 마지막 자식으로 추가 - afterend 요소의 바로 뒤에 추가 newElement 추가할 새로운 DOM 요소 insertAdjacentElement()는 전에 많이 사용했던 insertBef.. 2023. 8. 4. 이전 1 2 3 4 5 6 7 ··· 19 다음
