프론트엔드 개발자가 될거야./react
-
제어 컴포넌트, 비제어 컴포넌트프론트엔드 개발자가 될거야./react 2023. 12. 5. 13:06
input같이 form 관련된 컴포넌트를 다룰 때 사용되는 개념 각각의 개념을 요약하자면, 제어 컴포넌트는 React로 폼 데이터를 관리하는 방식(useState)이고, 비제어 컴포넌트는 React의 상태를 사용하지 않고 폼 데이터를 관리하는 방식(useRef)이다. useState로 불필요한 렌더링이 필요없는 경우에는 useRef를 사용하는 것이 더 좋으니 각각의 상황에 따라 선택하여 사용해보자! 제어 컴포넌트 VS 비제어 컴포넌트 (useState) 사용자 입력을 기반으로 자신의 state를 관리하고 업데이트한다. 즉, 사용자의 입력을 받는 컴포넌트에 event 객체를 이용해 setState()로 값을 저장하는 방식이다. 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화된다. 제어 컴포넌트의 값은..
-
[리액트 공식문서 정독하기] 리액트 주요개념 - 3 (폼, 합성 vs 상속, React로 생각하기)프론트엔드 개발자가 될거야./react 2023. 8. 19. 22:13
폼 제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 React에서 폼(form) 관련 컴포넌트를 다룰 때 사용되는 개념이다. - 제어 컴포넌트(Controlled Component) 상태를 사용하여 폼 입력 요소들을 관리하는 방식 사용자가 입력할 때마다 상태가 업데이트되며, 화면에 보이는 값과 상태가 항상 일치함 React가 폼 데이터를 쉽게 다룰 수 있게 해줌 useState를 사용하여 상태를 정의하고, onChange이벤트를 사용하여 입력값이 변경될 때마다 상태를 업데이트하는 방식 복잡한 폼에서 여러 입력 요소들을 쉽게 관리하고 싶을 때 폼의 입력값을 바로 React 상태로 가져와서 다루고 싶을 때 유..
-
[리액트 공식문서 정독하기] 리액트 주요개념 - 2 (이벤트 처리하기, React에서 콜백 함수 사용 시 주의할 점)프론트엔드 개발자가 될거야./react 2023. 8. 9. 21:51
이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 비슷해도 크게 세가지의 차이점은 있다. 세가지 차이점 React의 이벤트는 소문자 대신 캐멀 케이스(camelCase) 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러 전달 // HTML Activate Lasers // React -> 캐멀 케이스, 함수로 이벤트 핸들러 전달 Activate Lasers 3. React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출하여 폼을 제출할 때 가지고 있는 기본 동작을 방지해야한다. => 공식문서에서 이 부분은 틀린 것 같다. React에서는 합성 이벤트를 사용하여 ..
-
Fontsource로 폰트 적용하기프론트엔드 개발자가 될거야./react 2023. 8. 8. 16:44
Fontsource는 구글 폰트와 같은 오픈소스 폰트를 NPM 패키지로 제공해주는 라이브러리이다. Fontsource를 사용하면 오픈 소스 폰트를 프로젝트에 쉽게 불러올 수 있고 신속하게 사용할 수 있게 해준다. 성능과 개발 편의성적인 면에서 많은 장점이 있어서 사용할 만한 가치가 있는 것 같다 : ) https://github.com/fontsource/fontsource GitHub - fontsource/fontsource: Self-host Open Source fonts in neatly bundled NPM packages. Self-host Open Source fonts in neatly bundled NPM packages. - GitHub - fontsource/fontsource: S..
-
[리액트 공식문서 정독하기] 리액트 주요개념 - 1 (JSX, DOM에 React 엘리먼트를 렌더링하는 방법, Components와 Props)프론트엔드 개발자가 될거야./react 2023. 8. 8. 12:57
리액트 공식문서의 주요개념 파트를 읽으면서 꼭 기억하고 싶은 개념들을 정리해보았다. 잘 이해가 되지 않는 개념들은 GPT에게 물어봐서 이해하려고 노력했고 그렇게 습득된 개념들을 기록해보려고 한다! JSX React에서는 JSX라는 문법을 사용하여 UI(사용자 인터페이스)를 작성한다. JSX는 HTML과 비슷한 모양새를 가지고 있어서 javaScript로 UI 관련 작업을 할 때 시각적으로 더 도움이 된다. JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다. 또한 JSX 코드는 React 컴포넌트에서 사용되는 가상 DOM (Virtual DOM) 요소를 정의하는데 React DOM은 JSX에 삽입된..
-
페이지의 특정 부분으로 스크롤하는 방법프론트엔드 개발자가 될거야./react 2023. 8. 7. 17:07
구현 중에 버튼을 누르면 해당부분으로 자동으로 스크롤하게 하는 기능을 구현하게 되었다. 스크롤하게 하는 기능은 같은 페이지 내에서도 가능하고 다른 페이지로 이동한 후 해당 부분으로 스크롤하게 할 수 있다. 페이지 내에서 특정 부분으로 스크롤해주는 것은 사소한 부분일지라도 유저에게는 매우 편리한 기능이기에 알아두면 좋을 거 같다. case 1. 같은 페이지일 때 해당 부분으로 스크롤하기 같은 페이지 내에서 해당 부분으로 스크롤하는 방법은 간단하다. a부분으로 스크롤 a부분 이 예시에서는 'a부분으로 스크롤' 버튼을 누르면 해당 부분으로 스크롤된다. 이는 간단한 해시 값을 활용한 스크롤 이동이다. case 2. 다른 페이지로 이동해서 해당 부분으로 스크롤하기 다른 페이지로 이동한 후 해당 부분으로 스크롤하는..
-
stacked card slider 구현하기(react, styled-component)프론트엔드 개발자가 될거야./react 2023. 5. 11. 12:59
디자이너님에게 아래에 있는 card slider처럼 stacked card slider를 구현해달라는 요청을 받았다. Stripe Sessions 2023 | Stripe Sessions Conference San Francisco 그동안 슬라이드를 구현할 때 react-slick 라이브러리로 구현했는데 stacked card slider는 react-slick로 구현할 수 없었다. react-slick의 verticalSwipeToSlide를 활용해볼까도 했지만 라이브러리가 너무 망가져서 슬라이더가 오히려 이상해지기만 했다. 구글링을 통해 codepen에서 html, css, jQuery로 구현된 좋은 예시를 발견했고 이 코드를 내 코드로 녹여 구현할 수 있었다. https://codepen.io/ak..
-
[이미지 업로드, 이미지 프리뷰] FileReader객체란? reader.onload 함수란? (feat. chatGPT 너 진짜 똑똑하다..)프론트엔드 개발자가 될거야./react 2023. 2. 16. 18:09
이미지를 업로드하고 그 업로드 한 이미지를 프리뷰하는 기능을 구현하고 있다. const [previewImage, setPreviewImage] = useState(""); const [file, setFile] = useState(null); const inputRef = useRef(null); const handleImageUpload = (e: React.ChangeEvent) => { const selectedFile = e.target.files?.[0]; if (selectedFile) { if (selectedFile?.size > MAX_FILE_SIZE) { alert("파일 크기가 너무 큽니다."); return; } const reader = new FileReader(); read..