분류 전체보기101 리액트의 라이프 사이클 기본적으로 라이프 사이클이란 탄생부터 죽음까지의 과정을 의미 리액트 : Mount(렌더링된 순간) -> Update(리렌더) -> Unmount(화면의 컴포넌트 제거)의 과정 1. Mount : 서버에서 데이터를 불러옴 2. Update : 변경된 값이 무엇인지 콘솔 출력 3. Unmount : 컴포넌트가 사용하던 메모리 정리 및 해제 리액트의 "useEffect"를 이용해 쉽게 제어 가능 useEffect 라이프 사이클을 쉽게 제어하는 리액트의 내장 훅 기본적으로 화살표 함수 선언 후 배열(의존성 배열 Deps)에 출력할 값을 넣는 식으로 작성 import { useEffect } from 'react' function App() { const [count, setCount].. 2024. 2. 17. State로 사용자 입력 관리하기, Ref로 요소 지정하기 export default function Body(){ const [name, setName] = useState(""); // 빈 문자열 초기값으로 지정 function onChangeName(e) { setName(e.target.value); // input 태그가 변경되는 이벤트가 호출될 함수 호출 } return( ) } useState를 사용하여 각각의 value값 지정 및 입력값 관리 export default function Body(){ const [name, setName] = useState(""); const [gender, setGender] = useState(""); const [bio, setBio] = useState(""); // 각각의 입력폼마다 useState 지정 .. 2024. 2. 15. State 지속적으로 변화하는 값(컴포넌트 내에서 변화를 주도) import { useState } from 'react'; export default function Body(){ const [Light, setLight] = useState('OFF'); // 새로운 State 생성, 문자열"OFF"생성(초기값) // Light = state 값, setLight = 상태변화함수(state 값의 변화) return( body {Light} { setLight("ON"); // 상태변화함수 호출 후, state값의 문자열 변경(인수 전달) }} >켜기 { setLight("OFF"); // 위와 동일 }} >끄기 } -> 이렇게 값이 변경 가능한 이유 : 리액트가 컴포넌트의 값이 바뀔 때마다 렌더링을 다시하기 때.. 2024. 2. 15. Event Handling Event(웹에서 일어나는 사용자의 행동) + Handling(다루다, 처리하다) = 웹 사용자의 행동 처리 이벤트 핸들러 export default function Button({color, text, children}) { return( { // vanila JS와 거의 동일(이벤트 핸들러 형식) alert('clicked!'); }} style={{ backgroundColor: color }}> {children} ) } export default function Button({color, text, children}) { const onClick = () => { alert('clicked!'); } return( {children} ) } 이벤트 객체 이벤트 핸들러를 통해 이벤트를 받아오는 과.. 2024. 2. 15. Props props React앱에서 자식 컴포넌트에게 데이터를 보내주고자 할 때 사용하는 문법 // 여러개의 버튼에 각기 다른 텍스트를 적용하고 싶은 경우 return( body ) // 자식 컴포넌트에 요소를 추가할 경우 props프로퍼티로 이를 받아옴 export default function Button(props) { const {color, text} = props return( {"props.text"} ) } -> 객체 형태로 넘어오기 때문에, 구조분해할당도 적용(더 간단하게) export default function Button({color, text}) { return( {text} ) } -> 객체 프로퍼티로 넘어가는 형식이기 때문에, 아예 객체로 정의하여 사용도 가능 export defaul.. 2024. 2. 11. JSX 문법 JavaScriptXML의 약자(JS + HTML) // ex export default function Body(){ const num = 10; const string = "hello"; const bool = true; // boolean 값은 자식요소로 작성 불가 const obj = { // 객체는 자식요소로 작성 불가 obj.a는 가능(number 값이기 때문) a:1, } // 선언문이 아닌 표현식만 작성 return( Body {num} {num % 2 ? '짝수':'홀수'} ) // 조건부 렌더링 return( Body {num % 2 === 0 ? {num}는 짝수입니다.:{num}은 홀수입니다.} ) } JSX 문법 규칙 닫는 태그()를 꼭 사용 return하는 모든 값들은 최상위 부.. 2024. 2. 7. 이전 1 ··· 7 8 9 10 11 12 13 ··· 17 다음