728x90 react22 라이프사이클 메서드 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 //App.js import logo from './logo.svg'.. 2021. 6. 29. 컴포넌트의 라이프사이클 메서드 모든 리엑트의 컴포넌트에서 라이프 사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작해 페이지에서 사라질때 끝난다. 리엑트를 사용할때에는 컴포넌트를 처음으로 렌터링 할때, 컴포넌트 업데이트 전후로 어떤 작업을 처리해야할 수 도 있다. 이때 클래스형 컴포넌트는 라이프사이클 메서드를 사용한다. 함수형 컴포넌트는 라이프사이클 메서드 대신 훅(Hooks)를 사용한다. 라이프사이클 메서드의 이해 라이프사이클 메서드는 총 9가지 이며 Will이 붙으면 작업 작동 이전에 실행, Did가 붙으면 어떤 작업을 작동한 후에 실행되는 메서드 이다. 이 메서드들은 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있다. 라이프사이클은 총 3가지 1. 마운트 2. 업데이트 3. 언.. 2021. 6. 29. 컴포넌트 반복 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import React from 'react'; const IterationSample = () => { return( 1 2 3 4 ); }; export default IterationSample; cs 위와같은 코드가 있다고 해보자. li가 중복되어 있다. 만약 이런 식으로 중복된 코드가 늘어날 경우 파일 용량 증가와 효율적인 관리가 불가능 하다. 이럴때는 map()을 사용하면 된다 1 2 3 4 5 6 7 8 9 import React from 'react'; const IterationSample = () => { const names = ['1', '2', '3']; const name_list = names.map(name => {n.. 2021. 6. 28. DOM에 이름 달기-ref 통상적으로 HTML에서 DOM에 이름을 달때는 id를 사용한다. 또 한 리엑트 프로젝트에서도 이를 사용한다. public/index.html에서는 body의 div id가 root로 되어 있고 src/index.js에서는 document.getElementById('root')를 사용한다. 리엑트 프로젝트 내부에서는 ref(reference)를 통해 DOM에 이름을 달 수 있다. 물론 리엑트 컴포넌트 내부에서도 id를 사용할 수 있다. 하지만 id는 unique해야 되고 전역적으로 작동하기 때문에 중복된 id를 가진 DOM이 생길 수 있다. 하지만 ref는 해당 컴포넌트 내부에서만 작동한다. 만약 굳이 id를 사용해야 한다면 id뒤에 추가 텍스트를 넣어서 중복 id가 생기는 것을 방지하자(id=butto.. 2021. 6. 28. 이전 1 2 3 4 5 6 다음 728x90
