if(life){code();}

useEffect & useRef useEffect 컴포넌트에서 부수 효과(Side Effects)를 처리할 때 사용되는 Hook Side Effects 관리API 호출, 타이머 설정, 구독(subscription)등의 작업을 처리할 때 사용React의 렌더링 흐름과 독립적으로 실행됨컴포넌트 생명주기 관리(라이프사이클 제어 가능)클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 대체특정 시점(마운트, 업데이트, 언마운트)에서 실행되는 코드를 넣을 수 있음의존성 배열을 활용한 조건부 실행특정 상태 값이 변경될 때만 실행되도록 제어 가능 useEffect 기본 문법useEffect(() => { console.log("컴포넌트가..

전통적인 웹 개발 (HTML, CSS, JavaScript + jQuery) 기존의 웹 개발 방식→ HTML, CSS, JavaScript를 직접 사용해서 웹사이트를 제작특히 jQuery 같은 라이브러리를 사용해서 DOM을 조작하는 방식이 일반적 HTML, CSS, JS가 분리된 상태로 개발됨DOM을 직접 조작페이지 새로고침이 많음 (서버 렌더링 중심)복잡한 UI에서는 유지보수가 어려움재사용성 부족함 동작 원리서버 → 클라이언트(브라우저)로 HTML 파일 전송브라우저 :  HTML을 렌더링하고, CSS를 적용JavaScript가 실행되면서 동적인 UI 추가 (이벤트 리스너, 애니메이션 등)특정 이벤트 발생 시 document.querySelector() 같은 방법으로 DOM을 직접 수정새로운 데이터를 불..

State React에서의 State 컴포넌트의 상태컴포넌트가 가지고 있는 데이터나 조건을 나타냄예:Todo List에서의 할 일 목록 == 컴포넌트의 상태→ 사용자가 할 일을 추가하거나 삭제하면 상태가 변경, 이에 따라 UI가 업데이트됨 useState Hook을 사용한 상태 관리 상태 값을 정의하고, 이를 업데이트하는 함수도 함께 제공해야 함 (상태 정의, 변경)const [state, setState] = useState(initialValue);state: 현재 상태 값setState: 상태를 변경하는 함수initialValue: 초기 상태 값상태 값을 변경하면 React가 자동으로 해당 컴포넌트를 다시 렌더링 하여 UI를 업데이트함 State 업데이트 방법 새로운 값을 바로 설정 setState..