Component UI 지금까지 사용해본 React UI 라이브러리는 두 가지 라이브러리입니다. 대표적인 Component UI 방식입니다. Antd MATERIAL-UI 라이브러리를 사용해본 장점으로는 기본값으로 style이 지정되어있고 styled-componen

React에서 제공하는 Portal은 UI를 어디에서 렌더링 시킬지 DOM을 사전에 선택하여 부모컴포넌트 바깥에서 렌더링 할 수 있도록 해줍니다.child (첫번째인자) : ReactChildrencontainer (두번째인자) : DOM 엘리먼트react프로젝트의 h

틱택토 만들기 > React 공식문서 자습서에 나와있는 틱택토를 타입스크립트와 함수형 컴포넌트로 작업했습니다. > > buildTool: React-Create-App style: styled-component type-check: TypeScript github :

스크롤 퍼센트 구하기 > 이전 글에는 요소의 절대위치를 구하는 글을 적었습니다. 이번에는 현재 내가 얼마나 스크롤을 했는지 퍼센트를 구하는 방법입니다! > ( 스크롤 된 높이+ 보고있는화면(viewport)높이 ) / 전체문서높이 * 100 활용하기 Element

웹 페이지를 만들다 보면 해당 요소의 절대위치를 찾아야 할 때 있습니다,절대위치를 이용해 스타일을 꾸미거나 로직을 만들때 사용할 수 있습니다.해당 요소가 웹 페이지를 기준으로한 위치입니다.스크롤된 컨텐츠의 길이 + Viewport 상대좌표를 구하면 요소의 절대위치를

defaultProps React에서 props를 받아오는 방법은 간단합니다. 일

main.tsx ProductList.tsx

버튼클릭으로 원하는 컴포넌트 렌더링하는 방법

useRef란 React에서 제공하는 hook 중에 하나이며DOM에 접근 할 수 있도록 하는 기능을 가진 hook이라고 보면 된다.React에서 제공을 해주는 hook이기 때문에컴포넌트 최상단에 react와 같이 import를 합니다.컴포넌트 내 상단에 useRef(

스타일링을 하게되면 일정한 스타일을 반복하게 사용 될 경우가 있다.예시로 아래 코드는 완전히 동일한 스타일이 적용되어 있다.이렇게 완전히 똑같은 스타일을 사용해야 한다면 같은 코드의 양이 2배가 된다...코드의 양을 줄이기 위해 style-component 에서는 똑같

Advanced Router

리액트에서 스타일을 줄 수 있는 방법이 더 있다.Style Component 를 사용 하는 방법이다!SASS도 좋았지만 Style Component 를 사용하는 이유가 있다.클래스 이름의 중첩을 줄여줌attribute 추가가 가능스타일에 props를 적용 할 수 있다S

이번 1차 프로젝트를 하면서 새로 배운것이 있다.바로 API 주소를 JavaScript파일을 새로 만들어 변수처리해서 사용하는 것이다.이번 프로젝트는 3명의 백엔드 분들이 있어 서버를 하나로 합치기 전 까지3명의 API 주소를 바꾸면서 데이터를 맞춰봐야 했다.이 얼마나

SASS 🎨 > sass는 css 전 처리기 입니다. sass 문법이 css로 변환해주는 것! nesting, mixin, 변수 를 이용해 스타일시트의 유지보수와 가독성을 좋게 만들어 줍니다. 설치방법 --save 를 적는이유는 package.json 설치된 패키

상수데이터 👨‍💻 상수데이터란 변하지 않는 데이터, UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터 1️⃣ 상수데이터를 사용하는 이유 반복적인 구조가 보일 때 달라지는 부분들의 데이터를 배열형태로 분리시켜

어떤 함수가 input / output이외의 다른 값을 조작한다면, 이 함수는Side Effect가 있다고 표현합니다!함수컴포넌트에서는 외부세계에 영향을 주는 어떠한 행위입니다.대표적으로 Data Fetching, DOM에 직접 접근(ex. Event Listener

댓글창 구현하기😎 우선 자신이 작업해야 될 큰 그림을 알고있는 것이 좋다고 생각한다! 댓글창을 구현 하려면 어떤 작업을 해야할까! 댓글입력 값 저장 --> 댓글입력값 저장될 곳 지정 --> 엔터,클릭시 입력값 출력장소로 이동--> 댓글출력 댓글입력 값 저장 댓

우선 SPA 라는 개념을 알아야한다!SPA는 single page application 는 하나의 페이지로 구성된 애플리케이션입니다.이전 웹페이지 같은 경우 페이지의 개수마다 HTML 파일이 존재했지만SPA로 작업된 웹페이지는 단 한 개의 HTML로 구성되어있습니다!

React👨‍💻 프론트엔드 기술에서 빠질 수 없는 기술 React 를 익히는 첫 날이다! React는 Javascript 사용자 인터페이스 (UI) 라이브러리 라고 보면 된다. 프레임워크와 착각 할 수 있지만 엄연히 다르다.