반응형 개발364 함수 컴포넌트와 클래스 컴포넌트 클래스 컴포넌트 함수 컴포넌트 리액트 컴포넌트의 라이프사이클은 크게 마운트, 업데이트, 언마운트로 나뉜다. 클래스 컴포넌트에서는 각 주기에 실행될 코드를 메소드를 통해 작성한다. 마운트 된 직후에 호출되는 componentDidMount(), 네트워크 요청을 보내기에 적절함 갱신이 일어난 직후에 호출되는 componentDidUpdate 컴포넌트가 마운트 해제되어 제거되기 직전에 호출되는 componentWillUnmount(), 타이머 제거, 네트워크 요청 취소, 생성된 구독 취소 등을 작성 이러한 방식은 재사용을 위한 코드 작성시에 코드의 양을 길어지게 했고, 버그 방지를 위해 개발자가 신경써야 할 부분이 너무 많았다. 함수 컴포넌트에서는 위 라이프사이클 메소드가 useEffect 안에 추상화되면서 .. 2024. 1. 11. 브라우저에 url 치고 엔터누르면 메모용 --- 지금까지 웹 브라우저에서 URL을 입력했을 때, 일어나는 일들을 간단하게 살펴보았습니다. 웹 브라우저에 URL을 입력하고 Enter 키를 누릅니다. 웹 브라우저가 도메인의 IP 주소를 조회합니다. (먼저 캐시를 찾고, 그다음 DNS를 검색합니다.) 웹 브라우저가 찾은 IP 주소를 기반으로 서버와의 TCP 연결을 시작합니다. 웹 브라우저가 HTTP 요청을 서버로 전송합니다. (필요한 경우, HTTPS 보안 통신이 진행됩니다.) 웹 서버가 요청을 처리하고 응답을 다시 웹 브라우저로 전송합니다. 웹 브라우저가 전송 받은 콘텐츠를 렌더링합니다. 2024. 1. 10. react test library에서 textarea 테스트할때 keyPress,keyDown 결론만 말하면 keyPress 안먹히고 keyDown 써야한다. https://github.com/testing-library/user-event/issues/391 userEvent.type(input, 'text') consistently shuffles the input · Issue #391 · testing-library/user-event @testing-library/user-event version: 12.0.11 Testing Framework and version: jest@24.9.0 DOM Environment: jsdom@14.0.0 (via jest-environment-jsdom-fourteen) I'm having some issues with the following... .. 2024. 1. 9. 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. 이전 1 2 3 4 5 6 ··· 91 다음 반응형
