반응형

슬기로운 개발자생활/Frontend 6

React HoC 고차 컴포넌트에 대한 이해 (예제 포함)

React에서 고차 컴포넌트(Higher-Order Component, HoC)는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. HoC는 컴포넌트의 재사용성, 로직 공유, 상태 추상화, prop 조작 등에 유용합니다. HoC의 기본적인 구조는 다음과 같습니다: function withHoC(WrappedComponent) { // 반환되는 새로운 컴포넌트 return function(props) { // 추가 로직이나 상태를 이곳에 작성 // ... // WrappedComponent에 props를 전달 return ; }; } HoC 예제: 로딩 상태 관리 예를 들어, 여러 컴포넌트에서 공통적으로 사용되는 로딩 상태 관리 로직을 HoC를 사용하여 구현할 수 있습니다. 아래는 로딩 상태를..

[React] useEffect와 useMemo 차이

useEffect와 useMemo는 React의 훅(Hook)이지만, 사용 목적과 동작 방식이 서로 다릅니다. 차이점 요약 useEffect는 컴포넌트가 렌더링된 후에 실행되는 부수 효과를 다루는 데 사용됩니다. useMemo는 계산 비용이 높은 연산의 결과를 메모이제이션하여 성능을 최적화하는 데 사용됩니다. useEffect는 DOM 업데이트, 데이터 가져오기, 구독 설정과 같은 작업에 주로 사용됩니다. useMemo는 복잡한 계산이나 재계산을 피해야 하는 값의 계산에 주로 사용됩니다. 1. useEffect 목적: useEffect는 컴포넌트의 렌더링이 완료된 후에 부수 효과(side effects)를 수행하기 위해 사용됩니다. 부수 효과는 데이터 가져오기, 구독 설정, 수동으로 DOM 조작하는 것 ..

flex기반 CSS 스킬

정렬, 요소 배치, 등 웹 화면을 그릴 때 자주 사용하는 CSS 기법들을 정리해보았다. 순서 특정 요소 내 정가운데 정렬 화면 가운데 정렬 내부 요소 크기 조정 1. 특정 요소 내 정가운데 정렬 .flex-center{ display: flex; justify-content: center; align-items: center; } div 박스 내에 있는 요소를 정가운데에 정렬해야 할 경우 사용한다. 2. 화면 가운데 정렬 .screen-center { width: 100%; max-width: 393px; (screen-x 화면 최대 크기) height: 100%; display: flex; align-items: center; /* fixed center */ position: fixed; top: 5..

[Front-end] HTML5 모든 태그, 속성 총 정리

안녕하세요 ! 소신입니다 HTML5 태그와 관련된 속성들을 총 정리해보았습니다 ! CTRL+F 로 검색하시면 빠르게 찾으실 수 있습니다 ㅎㅎ HTML5에서 안쓰이는 태그들은 제외하였습니다. HTML 태그, 속성 (클릭하시면 w3Schools로 이동합니다.) 설명 속성 주석 문서타입 선언 하이퍼링크 href="URL" target="_blank" 약어 title="World Trade Organization" 연락처 주소 이미지 내 특정 위치에 하이퍼링크 삽입 shape="rectangle" coords="좌표" href="URL" article 영역 선언 콘텐츠 옆에 두는 영역 (주로 navigation, side bar) 오디오 콘텐츠 삽입 bold체 text 기본 URL, 다음 href는 /image..

[Front-end] CSS3 우선 순위(Score) + 속성(Attributes) 총 정리 + reset.css

안녕하세요 ! 소신입니다. CSS 우선순위와 속성들, 그리고 style을 초기화할 수 있는 reset.css입니다 ! ㅁ Selector 우선 순위 ㅁ CSS 속성 (Attributes) ※ box (block model) ㅇ Layout flex 하나면 모든게 편안 Color code + Gradient 까지 한번에 다룰 수 있는 사이트 ! cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media pr..

[Front-end] HTML5 기초, 기본 문법, 공부 방법 + Layout 연습 방법

안녕하세요 ! 소신입니다. Front-end 개발을 시작하면서 HTML5를 학습했던 방법에 대해서 공유하려고 합니다. ㅁ HTML5 기초 HTML은 웹사이트의 구조를 표현하는 프로그래밍 언어입니다. 그 중 HTML5가 유명해진 이유는 멀티미디어 지원과 페이지를 좀 더 풍부하게 만들게 되었다는 것입니다. 우선 저는 Visual Studio Code를 개발 툴로 고정해놨기 때문에 VSC를 쓴다는 점... 참고해주세요 Visual Studio Code에서는 doc를 입력하고 엔터만 쳐도 자동으로 html 기본 구조가 잡힙니다. head 태그안에는 meta태그나 사용할 css, javascript 를 불러와서 저장해놓구요 body 태그안에는 표현할 내용들이 들어가게 됩니다. ㅁ 기본 문법 HTML5를 배우면서 ..

반응형