728x90 리엑트13 라이프사이클 메서드 사용 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. 컴포넌트 반복 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. 이벤트 헨들링 리엑트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트 인터페이스와 동일하기 때문에 사용법이 비슷하다. 다만 다음과 같은 주의 사항이 존재한다. 1. 이벤트 이름은 카멜 표기법으로 표기한다 2. 이벤트에 실행할 js 코드를 전달하는 것이 아닌 함수 형태의 값을 전달한다. HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 실행할 코드를 넣었지만 리엑트에서는 함수 형태의 객체를 전달한다 3. DOM요소에만 이벤트를 설정할 수 있다 직접만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 만약 직접 만든 컴포넌트에 onClick={sth}이라는 클릭 이벤트를 설정한다면 이는 이름이 onClick인 props가 된다. 하지만 전달 받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 수는 있다. 리엑트 이벤.. 2021. 6. 21. 이전 1 2 3 4 다음 728x90
