본문 바로가기

🎨 Front-end/React.js2

React.js 쇼핑몰 만들기 | #1. 프로젝트 세팅, Styled Component 활용해보기 한동안 Vue.js나 Nuxt.js만 써 오다가, 최근 들어 리액트 프로젝트에 투입되면서다시금 초심으로 돌아가 React.js를 공부해보자 라는 생각이 들었다. (첫 프론트엔드 입문을 React.js로 했었음.)그래서, 몇 년 전에 해본거긴 한데 기억을 더듬어가며 개인연습 겸 겸사겸사 포트폴리오 겸 쇼핑몰 만들기를 해보려고 함.이왕 하는김에 지금 진행중인 프로젝트와 비슷한 레이아웃 구성으로 가보려고 한다. (창의성이 오래전에 고갈되었는지... 독창적인게 생각 안난다 ㅠ) 🛠️ 사용 기술 스택 정리 💻 프론트엔드 - React : 컴포넌트 기반 UI 개발- Vite : 빠른 빌드 및 핫 리로딩을 제공- TypeScript : 정적 타입 기반 개발로 안정성 향상 🎨 스타일링- Emotion (@em.. 2025. 7. 27.
React Hook의 이해 | useState, useEffect ✅ useState: 일종의 "메모장" 같은 것.컴포넌트 안에서 특정 값을 기억하고 싶을 때 사용하는 용도.ex1) 버튼을 몇 번 눌렀는지 숫자 기억하기. (count와 setCount 예제는 아마 지겹게 자주 보셨을것임.)ex2) 입력창에 입력한 값 기억하기.const [count, setCount] = useState(0); count: 현재 기억하고 있는 숫자setCount: 그 숫자를 바꿔주는 펜버튼 클릭할 때마다 숫자 써놓은 값을 바꿀 수 있음.바뀌면 화면도 자동으로 다시 그려짐(리렌더링). ✅ useEffect: "알람시계" 같은 개념.어떤 일이 일어났을 때(조건) 자동으로 실행되는 코드.ex1) 컴포넌트가 처음 화면에 나타났을 때 실행ex2) 특정 값이 바뀔 때마다 실행ex3) API 호출.. 2025. 7. 18.
TOP

Designed by AndersonLab

티스토리툴바