프론트엔드/React35 React context / useContext() 최종 수정 : 2024-04-21 Context 리액트 애플리케이션에서는 데이터가 컴포넌트의 props를 통해 부모에서 자식으로 단방향 전달만 가능하다. 이런 전달 방식으로 인해 프롭 드릴링(Props Drilling)이 발생한다. 이런 문제를 해결하고자 등장한 것이 바로 Context이다. context를 이용하면 단계마다 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 부분적으로 전역변수 처리하여 이용하는 방법이다. 또한 코드 역시 간결해지므로 디버깅 하기에도 굉장히 유리하다. 주로 context를 사용해 활용하는 기능은 다음과 같다. 테마 데이터(dark or light mode) 사용자 데.. 2024. 4. 18. 제어 컴포넌트 / 비제어 컴포넌트 최종 수정 : 2024-04-17 제어 컴포넌트(controlled component) 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트이다. 즉, 값이 리액트의 통제를 받는 입력 폼 엘리먼트(input form element)를 의미한다. 제어 컴포넌트에서는 모든 데이터를 state에서 관리한다. state 값을 변경할 때에는 무조건 setState() 함수를 사용해야 한다. 이처럼 제어 컴포넌트는 리액트에서 모든 값을 통제할 수 있는 구조를 갖고 있다. 값은 항상 최신값을 유지하며, 새로운 입력에 따라 업데이트 한다. 데이터와 UI에서 입력한 값이 동기화되어 잘 나타난다. 고유한 id값을 사용 import React, { useRef } from 'react'; function Test.. 2024. 4. 17. 리액트를 공부해야 하는 이유 + 장점과 단점 최종 수정 : 2024-04-14 리액트는 현존하는 자바스크립트 UI 라이브러리 중에서 가장 많이 사용되고 있다. 그로 인해, 취업이나 이직에서 더 많은 기회를 얻을 수 있다. 리액트(React) A JavaScript library for building user interfaces. 대표적인 자바스크립트 UI 라이브러리 라이브러리 프로그래밍에서는 자주 사용되는 기능을 정리해 모아 놓은 것이라는 의미를 갖는다. UI(User Interface) 사용자 인터페이스는 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해준다. 역할 SPA(Singgle Page Application)를 쉽고 빠르게 만들수 있도록 해주는 도구 장점 1. 빠른 업데이트와 렌더링 속도 V.. 2024. 4. 14. DOM / Virtual DOM / 파이버(Fiber) 최종 수정 : 2024-06-01DOM가상 DOM을 이해하기 위해서는 DOM에 대한 이해가 필요하다. DOM(Document Object Model)은 객체로, 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 이 문서 구조는 XML이나 HTML로 작성돼 있다. 웹 브라우저는 DOM을 활용하여 객체에 JS와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. 그러나 DOM은 동적 UI에 최적화되어 있지 않다는 치명적인 단점이 있다. 예를 들어, 스크롤을 내릴 때마다 새로 생기는 웹 페이지나 버튼을 클릭했을 때 나타나는 이미지나 글자 등, 이처럼 규모가 큰 웹 애플리케이션에서 DOM에 .. 2024. 4. 14. 리액트 디자인 적용 프론트엔드 개발자에게는 개발 기능 못지 않게 디자인은 중요하다. 특히 CSS 스타일링과 이미지 처리가 중요하다. 이는 UX와 직접적으로 연결되어 있기 때문에 잘 관리하는 것은 필수적이라 말할 수 있다. 방법 1. 이미지 불러오기 import 구문을 통해 이미지 파일을 불어온 뒤, 주소를 src 속성으로 사용 import profileImg from '해당 경로'; function Profile() { return ; } export default Profile; 방법 2. 클래스네임을 통해 CSS 파일 불러오기 import 구문을 통해 CSS 파일을 불러올 수 있다. CSS 파일에 정의된 클래스를 사용하려면 className prop에 문자열로 놓오주면 된다. 재사용성을 위해서는 부모 컴포넌트에서 받는 .. 2024. 4. 11. 이전 1 2 3 4 5 6 7 다음
