React10 노마드코더 React Hooks - 2 useEffect 를 활용한 커스텀 훅들 useEffect 란? componentWillMount, componentDidMount, componentWillUpdate 의 클래스 컴포넌트의 생명주기 함수의 기능을 함수형 컴포넌트로 수행 useEffect(function, array); 첫번째 매개변수는 useEffect 이 실행될 때마다 실행될 콜백함수를 넣어준다. 두번째 매개변수는 의존성 배열 (deps) 로 해당 배열에 지정해준 그 값이 변경될 때마다 useEffect 를 실행시킬 수 있게 지정할 수 있다. 이미 알고 있는거지만 복습 겸 기초를 다진다 생각하고 다시 정리한다. useEffect(콜백함수, []); // Mount 됐을 때 1번 실행 useEffect(콜백함수); // Mount와 U.. 2023. 6. 13. 한입 크기로 잘라먹는 리액트 - 3 Props 컴포넌트에 데이터를 전달하는 방법 부모 컴포넌트에서 자식 컴포넌트에게 속성과 값을 넘겨주는 것 props 를 사용하여 데이터를 전달하면 컴포넌트는 해당 데이터를 활용하여 UI를 동적으로 생성하고 업데이트 할 수 있다. 기본적으로 키=값 형태로 넘겨주게 되는데, 넘겨줄 속성이 많아지면 속성:속성값 형태의 객체로 만들어서 전개 연산자(...)와 함께 사용해준다. const customProps = { 속성: 속성값, 속성2: 속성값2, }; // ... 결과적으로 자식 컴포넌트에서는 위에서 받아준 속성값을 props 객체에 담아서 넘겨주게 된다. 비 구조화 할당을 활용하여 props 객체에 담겨오는 속성값만 접근해줄 수 있다. // children 은 props 객체에서 children 키만 받아.. 2023. 3. 29. 원티드 프리온보딩 FE 4월 사전과제 제출 전 정리 이번에 알게되어 참가하려고 공부해본다. 다만.. 아직 리액트를 배운지 며칠 되지 않아서 Hooks 이라든가 라이프사이클? 이런걸 모르기에 시작하기 전에 힘내서 공부해둘 예정이다. React 라이프 사이클 클래스형 컴포넌트에서 사용했던 것으로 요즘 주로 사용되는 함수형 컴포넌트에선 지원하지 않는다고 알고 있다. 대신 Hook 이라는 기술을 사용한다는데, 그럼에도 불구하고 알아둬야 하는 이유는 클래스형 컴포넌트를 함수형 컴포넌트로 리팩토링 해야 하는 일이 생길 수 있기 때문이라고 본다. 라이프 사이클은 컴포넌트가 생성되고 업데이트 되고 파괴될 때 일어나는 일련의 단계이자 생명 주기이다. 크게 3가지로 나눠지며 라이프 사이클 메서드를 통하여 제어할 수 있다. 1. 생성 Mounting 컴포넌트가 DOM 상에 .. 2023. 3. 26. KDT 5th 웹개발자 입문 수업 35일차 - 2 Virtual DOM 부드럽고 빠르며 아키텍쳐에 대한 고민이 적다. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org CDN React 시작하기 function helloWorldButton() { return React.createElement( "button", { onClick: () => {} }, "Hello, React World!" ); } const e = React.createElement; const domContainer = document.querySelector('#app'); const root .. 2023. 3. 24. 이전 1 2 3 다음
