반응형 개발/React51 함수 컴포넌트와 클래스 컴포넌트 클래스 컴포넌트 함수 컴포넌트 리액트 컴포넌트의 라이프사이클은 크게 마운트, 업데이트, 언마운트로 나뉜다. 클래스 컴포넌트에서는 각 주기에 실행될 코드를 메소드를 통해 작성한다. 마운트 된 직후에 호출되는 componentDidMount(), 네트워크 요청을 보내기에 적절함 갱신이 일어난 직후에 호출되는 componentDidUpdate 컴포넌트가 마운트 해제되어 제거되기 직전에 호출되는 componentWillUnmount(), 타이머 제거, 네트워크 요청 취소, 생성된 구독 취소 등을 작성 이러한 방식은 재사용을 위한 코드 작성시에 코드의 양을 길어지게 했고, 버그 방지를 위해 개발자가 신경써야 할 부분이 너무 많았다. 함수 컴포넌트에서는 위 라이프사이클 메소드가 useEffect 안에 추상화되면서 .. 2024. 1. 11. JSX Element React Element ReactNode 차이 JSX Element, React Element, ReactNode 먼저 JSX가 createElement로 변환되는 것을 한번 보자 return hi; 위 JSX 코드는 다음과 같이 변환된다. return React.createElement('div', null, 'hi'); JSX Element와 React Element의 관계 JSX문법으로 적는 return hi는 react와 컴파일러에 의해 JS인 createElement로 변환된다. 이 createElement를 통해 생성되는 element가 바로 가상돔의 표현방식인 React Element이다. 실제로 타입을 보았을때는 JSX Element가 React Element보다 조금 더 유연한 방식이다 정도로만 느껴진다. 이 타입은 React El.. 2024. 1. 8. 객체를 state로 이용할 때는 readonly로 직접 변경 못하게 막기 리렌더링 방지를 하는게 아니라면 아래와 같은 코드는 쓰지 않는게 좋다.(리렌더링 방지를 원한다면 useRef가 적합하다) const [application, setApplication] = useState({ name: "june", product: "SEB", }); // application을 직접 변경하는 것은 리렌더링을 일으키지 않음 application.name = "seung"; 코딩단계에서 막을 수 있게 타입스크립트로 타입가드를 하자. readonly를 이용해서 직접 변경을 막은 코드이다. interface ApplicationType { readonly name: string; readonly product: string; } const [application, setApplication].. 2024. 1. 7. state 업데이트는 비동기라기보다는 스냅샷이다. state 업데이트는 비동기라기보다는 스냅샷이다. 아래와 같이 코드를 작성하면 console.log(state)는 1이 아닌 0이 찍힌다. const Component = () => { const [state,setState] = useState(0) return ( { setState(1) console.log(state) // 0 }}> ) } setState가 비동기로 작동해서 console.log보다 나중에 실행되기 때문이라고 생각했는데, 그보다는 스냅샷이 맞는 표현이다. { setState(1) // 다음렌더링에서 state를 1로 바꿀 준비를 한다. console.log(state) // 0 }}> 리액트는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. .. 2024. 1. 7. 이전 1 2 3 4 ··· 13 다음 반응형
