본문 바로가기

분류 전체보기226

[7] Drag and Drop 기능, 리액트 불변성 지키기 Drag and Drop 기능 구현 순서HTML 드래그 앤 드롭 API를 사용하여 원하는 목록을 드래그 가능하게 만듭니다.사용자가 드래그를 할 때 적절한 애니메이션을 줍니다.사용자가 드래그를 멈췄는지 확인합니다. 그리고 여기에도 애니메이션을 줍니다.클라이언트가 목록을 재정렬한 경우 항목의 위치를 새 항목으로 업데이트합니다.이것을 쉽게 구현할 수 있게 도와주는 모듈이 'react-beautiful-dnd' https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그 앤 드롭 API - Web API | MDNHTML 드래그 앤 드롭 인터페이스는 Firefox와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍.. 2024. 12. 4.
[6] TailWind CSS TailWind CSS란?HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크입니다. CSS 프레임워크란?CSS 프레임워크는 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/ 디자인 프로젝트에 적용할 수 있는 CSS 파일 모음입니다.더 빠르게 애플리케이션을 스타일링 하는데 도움을 줍니다. Tailwind CSS의 장점Tailwind CSS는 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 Uitility Class를 활용하는 방식으로 HTML에서 스타일링을 할 수 있습니다.그러기에 빠른 스타일링 작업이 가능하고,class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 됩니다.유틸리티 클래스가 익숙해지는 시간이 .. 2024. 12. 3.
[5] React Hooks React Hooks은 무엇인가?React Hooks은 ReactConf 2018에서 발표된, class 없이 state를 사용할 수 있는 새로운 기능이다. React Hooks이 필요한 이유?React Hooks은 주로 class component로 사용되어 온 react에서 느껴 왔던 불편함이나 문제점들을 해결하기 위해 개발되었다.원래 react는 주로 class component를 사용하고 react hooks는 functional component를 사용하기 때문에 먼저 그 부분부터 비교해보겠다. 2024. 12. 3.
[4] React State 리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 React State를 사용해야 합니다. React State란 무엇인가?컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체입니다.(state가 변경되면 컴포넌트는 리랜더링(Re-rendering)되고, state는 컴포넌트 안에서 관리됩니다. State의 특징컴포넌트 내부에서 관리됨State는 React 컴포넌트의 "내부 상태"로, 해당 컴포넌트에서만 접근하거나 변경할 수 있습니다.Props와 달리 부모 컴포넌트로부터 값을 받지 않고, 컴포넌트 자체에서 정의하고 관리합니다.값 변경 시 UI 자동 업데이트setState (클래스형 컴포넌트) 또는 상태 업데이트 함수(함수형 컴포넌트)를 사용하면 React가 변경된 state 값을.. 2024. 12. 3.
[3] JSX 키 속성 JSX key 속성은 무엇인가?리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야한다.키는 react가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야한다.리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용!!!리액트에서는 리스트를 나열할 때 바뀐 부분만 찾을 때 어떻게 할까?-> key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다.  key에는 유니크한 값을 넣어주자! (index는 비추천)index도 0부터 시작해서 유니크한 값을 가지지만, 만약 리스트가 추가되거나 제거되면 해당 리스트들의 key값도 바뀌게 된다. 2024. 12. 3.
[2] SPA(Single Page Application), JSX(Javascript syntax extension) SPA(Single Page Application)이란?현재 App.js 파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용이 된다.어떠한 순서로 실행되고 있는지 살펴보겠다. 여기서 한가지 의문점이 있다.index.html 템플릿이 하나면 한 개의 페이지 만들 때는 괜찮은데 두 개 이상의 페이지를 만들 때는 어떤 식으로 해야할까?원래는 A 페이지를 만들면, a.html, B 페이지를 만들면 b.html 이런식으로 만들었다.위와 같은 방식이 전통적인 웹 사이트를 만들 때 사용하는 Multi Page Application이다.하지만 요즘에는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.이것을 SPA(Single Page Application)이라고 부른다. SPA에서.. 2024. 12. 3.

티스토리툴바