분류 전체보기59 [React] 컴포넌트의 라이프사이클 (Lifecycle) 리액트의 모든 컴포넌트는 생명 주기를 갖는다. 이는 크게 마운트(생성) > 업데이트 > 언마운트(제거)의 세 단계로 구분하는데, 함수형 컴포넌트에서는 useEffect를 사용, 클래스형 컴포넌트에서는 생명 주기 메서드를 사용하여 생명 주기에 맞춘 코드를 작성할 수 있다. 클래스형 컴포넌트 생명 주기 관리 1. 마운트 시 호출되는 메서드constructor: 컴포넌트가 마운트 되기 전에 호출된다. this.state에 객체를 할당하여 state를 초기화하고, 인스턴스에 이벤트 처리 메서드를 바인딩한다.getDerivedStateFromProps: 컴포넌트가 최초 마운트될 때와 업데이트될 때 호출된다. state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무것도 갱신하지 않을 수 있다. .. 2025. 12. 16. [React] List 렌더링과 key 리액트에서는 유사한 형태의 여러 데이터를 순회형 데이터로 만들어 간편하게 JSX를 렌더링 할 수 있다. 배열 데이터 렌더링 콘솔에 key prop 에러가 뜬 것을 볼 수 있다. map() 메서드로 렌더링 된 JSX 요소들은 반드시 고유의 key 속성을 가지고 있어야 한다. 이는 추후에 데이터가 삭제, 수정될 때 기존의 순서나 불변 데이터를 올바르게 유지하기 위해 쓰인다. key 값은 같은 map() 메서드로부터 렌더링 되는 배열의 요소들 간에는 고유해야 하나, 다른 데이터나 배열로부터 렌더링 된 JSX 요소의 key 값과는 중복되어도 무관하다. 구조화된 데이터 필터링 데이터에 포함된 값을 key 값에 할당해 주었다. 그 외에 컴포넌트 내에서 uuid (crypto.randomUUID) 등과 같은 값을 .. 2023. 6. 29. [React] 조건부 렌더링 리액트에서 조건문을 잘 활용하면 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 그 방식은 조건부로 JSX를 반환하거나 JSX 구문을 조건문에 포함하는 두 가지로 나뉜다. 1. 조건부로 JSX 반환하기1) 조건별 항목 구분 2) 조건에 따라 아무것도 반환하지 않는 컴포넌트 2. 조건문에 JSX 포함하기1) 삼항연산자 활용 2) 논리곱 연산자 활용 3) JSX를 조건부로 할당 2023. 6. 23. [React] 이벤트 처리하기_1 Event Handler in React리액트는 jsx에 이벤트 핸들러를 등록할 수 있게 해 준다. 이벤트 핸들러는 클릭이나 마우스오버, 값 입력 등에 대해 반응할 수 있게 만드는 함수이다. //button 태그에 alert 이벤트를 등록해주는 함수 handleClickexport default function Button() { function handleClick() { alert('You clicked me!'); } return ( Click me );}일반적으로 컴포넌트 내부에서 정의해서 사용하며 이름을 handle로 시작하는 단어로 정하는 것이 컨벤션에 더 적합하다. 아래와 같이 jsx 내부에서 인라인 방식으로 이벤트 핸들러를 정의할 수도 있다.//화살표 .. 2023. 4. 24. [React] React Hook_useRef useRef렌더링을 유발하지 않는 값을 저장하는 변수이다. 본질적으로는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다고 생각하면 된다.값을 참조하거나DOM을 조작하거나참조값의 재생산을 방지하는역할을 한다. 특징들을 종합적으로 살펴보았을 때 참조 값이 갱신되어도 컴포넌트가 리렌더링 되거나 갱신을 알 수 있는 어떤 동작이 이루어지지 않는다는 것을 알 수 있다.function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); .. 2023. 4. 12. 이전 1 2 3 4 5 6 ··· 12 다음
