Gray CHA

토이 프로젝트를 진행하면서, 메인 페이지 더보기 기능을 추가해야 했다. 버튼 방식과 무한 스크롤 방식에 대해 고민하였고 모바일 화면에서 좀 더 유연하게 대응할 수 있는 무한 스크롤 방식으로 구현해보았다. 기본개념 웹 브라우저 콘텐츠의 높이값을 이용하면, 쉽게 구현이 가능합니다. 필요한 속성값은 다음과 같습니다. Element.scrollHeight 읽기 전용 속성으로 요소 콘텐츠의 총 높이를 나타내며 화면에 보이지 않는 영역도 포함됩니다. Element.scrollY 읽기 전용 속성으로 콘텐츠가 수직으로 얼마나 스크롤됐는지 표현합니다. Element.clientHeight 읽기 전용 속성으로 엘리먼트의 내부 높이를 표현하며 정확한 영역은 내부 여백(padding)은 포함하지만, 외부 여백(margin)은..

리덕스(redux)는 리액트 상태를 관리해주는 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 파악 및 컴포넌트 간 상태 공유가 가능하기 때문에 전역 상태를 관리할때 효과적이지만, 모든 프로젝트에서 리덕스 라이브러리를 필요로하는건 아니다. 컴포넌트 상태 관리 비교 리덕스를 사용했을때와 그렇지 않았을때 컴포넌트끼리 상태를 공유하는 과정을 알아보자. 먼저, 리덕스를 사용하지 않았을 경우 상태 관리 과정을 살펴보자. 지역 컴포넌트에서 상태가 변동되면, 상위 컴포넌트부터 최상위 컴포넌트 까지 상태 변경에 대한 관리가 필요하다. 즉, 관리해야하는 컴포넌트의 수가 많을 수록 상태 관리는 어려워지고 코드 유지보수성과 작업 효율이 낮아진다. 다음, 리덕스를 사용했을 경우 상태 관리 과정을 살펴보자. 지역 컴포넌트에서 ..

react 프로젝트에 Tailwind css 설치하는 방법과 설정 방법에 대해서 알아보자. 기본 디렉토리 구조 파악이 필요하며, CRACO와 PostCss 에 대한 기본 개념을 숙지하도록 하자. 디렉토리 구조 ReactJS 프로젝트 기준으로 tailwind css 를 설치하면, 기본 디렉토리 구조는 아래와 같다. Tailwindcss설치 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 CRACO 설치 npm install @craco/craco Create React App Configuration Override 의 약어로 create-react-app을 쉽고 간편하게 설정하기 위해 구성한 레이어..

소스 코드 useState를 이용하여, toggle 기능을 쉽게 구현할 수 있으니 참고하자. 핵심은 onClickGnb 호출 시, 이전 상태를 삼항연산자로 처리하면 쉽게 구현할 수 있다. const [gnbStatus, setGnbStatus] = useState(false); const onClickGnb = (e) => { setGnbStatus(prevStatus => prevStatus ? false : true); }; const GnbMenu = () => ( 메뉴1 메뉴2 메뉴3 ); ... 생략 ... {/* Gnb Menu */} { gnbStatus ? : null} 출력 결과 gnb 버튼을 클릭하여 정상적으로 작동하는지 체크해보자.

map( ) arr.map(callback(currentValue[, index[, array]])[, thisArg]) - callback 새로운 배열 요소를 생성하는 함수. - currentValue 처리할 현재 요소. - index Optional 처리할 현재 요소의 인덱스. - array Optional map()을 호출한 배열. - thisArg Optional callback을 실행할 때 this로 사용되는 값. 반환 값 - 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열. map 함수를 이용하여 반복적으로 수행해야하는 컴포넌트를 렌더링 할 수 있다. const Map = () => { const menu = ['pizza', 'potato-chips', 'pasta'..

이벤트 이벤트는 카멜표기법으로 명명한다. 이벤트는 DOM 요소에만 적용 가능하다. // DOM 적용 사례 Component 에 자체적으로 설정할 수 없다. 아래를 예시를 보면, Test에 onClick 이라는 props를 전달한다는 의미다. onClick 이벤트가 아님을 주의하자! // DOM 적용 사례 false를 반환해도 기본 동작을 막을 수 없으며, 반드시 preventDefault를 명시적으로 호출해야 한다. function returnFalse(e) { e.preventDefault(); } 이벤트 - 클래스형 컴포넌트 바벨 transform-class-properties 문법으로 선언할 경우, constructor를 선언하는것 보다 간편하게 사용할 수 있다. # 파일 : PracEventCla..

컴포넌트 컴포넌트는 프로그래밍적인 의미로 재사용 가능한 각각의 독립된 모듈을 말한다. 즉, 효율적인 협업과 생산성을 높이는 성능 최적화 시스템 구현을 가능하게 한다. 명명규칙 컴포넌트명은 항상 대문자로 시작해야 하고, props(속성) 임의 값을 전달받아 화면에 표시하는 React element를 반환한다. 컴포넌트 선언 1. 클래스형 컴포넌트 state / 생명주기 활용 가하고, render() 함수를 반드시 선언해야 한다. import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } export default App; 2. 함수형 컴포넌트 state / 생명주기 활용 불가능했지만, Ho..