반응형 웹개발기초4 React useEffect 완전정복｜렌더링 후 실행, 상태 변화 감지, 클린업까지 한눈에 📘 리액트 스터디 시리즈 6편useEffect 완전 이해하기｜React의 사이드 이펙트와 라이프사이클안녕하세요! 오늘은 React에서 외부 작업을 처리할 수 있게 해주는 useEffect훅에 대해 배워봅니다 🧪API 호출, 타이머 설정, 로컬 저장소 접근 등은 모두 "사이드 이펙트(Side Effect)"이며, React의 렌더링 사이클과 연계해서 제어해야 합니다.⚡ useEffect란 무엇인가요?useEffect는 리액트 컴포넌트가 렌더링된 이후 실행되는 Effect Hook입니다.import { useEffect } from 'react';useEffect(() => { // 여기에 실행할 코드 작성}, []);✅ 컴포넌트가 마운트(처음 렌더링)되었을 때 실행✅ 의존성 배열에 따라 업데이트될 때.. 2025. 7. 4. 리액트 리스트 & 조건부 렌더링｜map(), 삼항 연산자 실전 예제로 쉽게 배우기 📘 리액트 스터디 시리즈 5편리스트 렌더링 & 조건부 렌더링｜React로 유동적인 UI 만들기안녕하세요! 오늘은 리액트에서 리스트를 출력하는 방법과 조건에 따라 UI를 다르게 보여주는 방법을 배워봅니다 😊이제부터는 데이터에 따라 동적으로 화면을 구성할 수 있어요!🔁 리스트 렌더링 (map 사용)React에서는 배열.map()을 이용해 컴포넌트를 반복 출력합니다.const items = ['사과', '바나나', '포도'];function ItemList() { return ( {items.map((item, index) => ( {item} ))} );}✅ 각 요소를 li로 렌더링✅ key는 각 항목의 고유값 (index는 임시로 사용 가능)🎯 주의:.. 2025. 7. 3. 리액트 useState 완전정복｜이벤트 처리부터 상태 기반 UI 만들기까지 📘 리액트 스터디 시리즈 4편이벤트 처리와 상태 관리｜useState로 동적인 UI 만들기안녕하세요! 리액트 스터디 시리즈 4편에서는 이벤트 처리와 상태(state) 관리를 다뤄볼 거예요.드디어 리액트의 진짜 힘! 사용자와 상호작용하는 UI를 만들 수 있게 됩니다 🚀🖱️ 리액트에서 이벤트 처리하기HTML에서 버튼 클릭은 onclick="..."처럼 쓰지만, React에서는 onClick={함수}처럼 카멜케이스와 중괄호를 사용합니다.function App() { function handleClick() { alert('버튼이 클릭되었어요!'); } return ( 클릭하기 );}✅ 이벤트 이름은 onClick, onChange 등 카멜케이스로!✅ 이벤트 핸들러는 함.. 2025. 7. 2. HTML 기초 태그부터 구조 잡는 법｜완전 초보도 이해하는 웹페이지 기본 가이드 📌 HTML 기초 태그부터 구조 잡는 법｜완전 초보도 이해하는 웹 페이지의 첫걸음안녕하세요, 퍼블리셔 노미입니다 :)오늘은 HTML을 처음 접하는 분들을 위해 HTML의 기초 태그와 웹 페이지 구조를 잡는 방법에 대해 자세히 설명드릴게요. HTML은 웹의 뼈대라고 불릴 만큼, 웹 페이지를 구성하는 핵심 언어입니다.처음에는 낯설지만 하나씩 차근히 익히면 누구나 쉽게 시작할 수 있어요!🔍 HTML이란?HTML(HyperText Markup Language)는 웹 페이지의 구조를 만드는 마크업 언어입니다.간단히 말해, 웹 페이지에서 ‘어떤 내용이 어떤 역할을 하는지’를 브라우저에게 알려주는 언어입니다.HyperText: 클릭하면 다른 페이지로 이동할 수 있는 링크 개념Markup Language: 텍스트에.. 2025. 4. 17. 이전 1 다음 반응형
