React
1.[React] 리액트 시작하기
리액트는 라이브러리로 분류되며, 개발 방법의 자율성이 높음. 하지만 시간이 지나면서 프레임워크의 특성을 일부 포함하며 진화라이브러리 vs 프레임워크 비교라이브러리: 떡볶이 → 떡, 고추장, 오뎅 등등 다 직접 조합해서 만드는 것프레임워크: 밀키트리액트는 Jordan W
2.[React] NPM, NPX, YARN
NPM은 Node.js와 함께 제공되는 패키지 관리 도구Node.js 애플리케이션에서 필요한 패키지 설치, 제거, 업데이트, 실행 등을 간편하게 처리 가능패키지 설치실행 환경에서 필요한 패키지 설치(Dependencies)npm install <package_na
3.[React] SWC, Vite, Babel, Webpack
빌드툴이란 프론트엔드 개발자들이 코드를 더 쉽고 빠르게 만들기 위해 사용하는 도구빌드툴 종류트랜스파일러번들러등…바벨이란?바벨은 JavaScript 트랜스파일러로, 최신 문법을 구버전 브라우저에서도 실행 가능하게 변환하는 도구예시: ES6 → ES5 변환바벨의 필요성Ja
4.[React] 리액트 가상 돔(Virtual DOM)
npm 트렌드를 확인할 수 있는 사이트최근 5년간 react, svelte, vue 사용량 비교npm 트렌드 사이트 확인 결과 리액트가 Vue, Svelte 등 다른 프레임워크보다 훨씬 많은 사용자 기반 보유 중강력한 커뮤니티 지원풍부한 교육 자료, 튜토리얼, 예제 코
5.[React] 리액트 클래스형 컴포넌트 함수형 컴포넌트
리액트 초기에는 클래스형 컴포넌트가 주로 사용됨. 클래스형 컴포넌트는 Component를 상속받아 만들어짐예제 코드:함수형 컴포넌트는 함수의 형태로 작성됨. 최근에는 React의 주요 작성 방식으로 자리잡음예제 코드:복잡한 생명주기 메서드componentDidMount
6.[React] 웹폰트 적용(Google Fonts, Noonnu, Custom Fonts)
Google Fonts 사이트 접속원하는 폰트를 검색하고 선택"Get font" → "<>Get embed code"를 복사하여 프로젝트에 추가HTML 파일의 <head> 태그에 추가preconnect란?HTML이 렌더링되기 전에 특정 URL과 미리 연결하여
7.[React] 리액트 CSS 스타일링
기본 css 인라인 스타일 글로벌 스타일 CSS Modules CSS-in-JS Styled-Components Emotion Vanilla Extract Tailwind CSS > 💡 인라인+글로벌: 같이 사용되는 경우가
8.[React] 리액트 Props, Children
리액트는 부모에서 → 자식 컴포넌트에게만 데이터를 전달할 수 있음 ⇒ 단방향 데이터 흐름💡 반면 Vue는 양방향 데이터 바인딩을 지원Props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달할 때 사용전달받은 데이터는 자식 컴포넌트에서 수정 불가능함Props는 객체
9.[React] 컴포넌트 이벤트
리액트 이벤트는 카멜 케이스로 작성하며, 함수 참조 방식(onClick={handler})으로 사용함⚠️ 함수 호출 방식으로 전달({clickHandler()})시 컴포넌트가 렌더링될 때마다 함수가 실행됨⇒ 이를 피하기 위해 함수 참조로 전달할 것이벤트 객체는 이벤트
10.[React] 프롭스 드릴링
프레젠테이션 컴포넌트란? 자식 컴포넌트에게 프롭스를 전달하는 역할만 하는 컴포넌트상위에서 받은 props를 하위로 전달하는 것이 주된 역할⚠️ 여러 컴포넌트를 거쳐 전달 시 프롭스 드릴링(props drilling) 문제 발생 가능프롭스 드릴링이란? 데이터(혹은 함수)
11.[React] 리액트 조건부 렌더링
React에서 조건부 렌더링은 특정 조건에 따라 컴포넌트를 표시하거나 숨길 때 사용JSX 외부에서 조건에 따라 전체 컴포넌트 또는 JSX 블록을 처리할 때 유용함JSX 내부에서 참과 거짓에 따라 다른 요소를 렌더링할 때 사용JSX 범위 안에서 참에 따른 분기 처리를 하
12.[React] 리액트 반복 렌더링
map 메서드는 배열의 요소를 순회하며 새로운 배열을 반환하는 역할을 함리액트에서 자주 사용되는 이유는 JSX 요소를 배열 데이터로부터 생성하는 작업에 매우 적합하기 때문임콜백 함수 실행: 배열의 각 요소를 순회하며 콜백 함수 실행새로운 배열 생성: 콜백 함수의 반환값
13.[React] useState
1\. 일반 변수 선언 (화면 렌더링에 영향 없음)let, const, var로 선언된 변수들은 리액트가 변화 추적 불가2\. 상태 변수 선언 (화면 렌더링에 영향 있음)useState와 같은 리액트 훅으로 선언상태 변경 시 화면 자동 리렌더링React에서 상태를 사용
14.[React] useRef
비제어 컨트롤러는 DOM 요소에 직접 접근하여 값을 관리하는 방식으로, 실시간 값 변화 감지 불가useRef를 사용해 DOM 요소 참조React에서 제공하는 Hook으로, 값을 보관하고 관리할 수 있는 저장소주요 특징:컴포넌트가 리렌더링되어도 동일한 참조값 유지값이 변
15.[React] 리액트 이미지 렌더링
특징빌드 도구가 이미지를 최적화하고 관리함사용하지 않는 이미지는 최종 번들에 포함되지 않는 트리쉐이킹 적용빌드 시 이미지 이름이 해시값이 포함된 새로운 파일명으로 변환임포트(import)를 사용하여 이미지 추가장점: 빌드 도구가 경로를 자동으로 관리하고, 이미지 최적화