728x90 Front-End39 [React] 8. 리스트와 Key 출처: React 공식 홈페이지 리스트와 Key – React (reactjs.org) 1. 여러개의 컴포넌트 렌더링하기 > map()함수를 이용 const numbers = [1,2,3,4,5]; const listItems = numbers.map((number) => {number} ); ReactDOM.render( {listItems}, document.getElementById('root') ); 2. 기본 리스트 컴포넌트 > key={number.toString()} 이 없으면 key 누락 warning이 뜬다. function NumberList(props){ const numbers = props.numbers; const listItems = numbers.map((number) => .. 2021. 2. 3. [React] 7. 조건부 렌더링 출처: React 공식 홈페이지 조건부 렌더링 – React (reactjs.org) 1. if문을 통한 분기 function UserGreeting(props){ return Welcome Back!; } function GuestGreeting(props){ return Please sign up.; } function Greeting(props){ const isLoggedIn = props.isLoggedIn; if (isLoggedIn){ return ; } return ; } ReactDOM.render( , document.getElementById('root') ); 2. State가 있는 버튼을 누르면 문구가 변하는 화면. State + if 활용. 대충보고 스킵하세용~ class Log.. 2021. 2. 1. [React] 6. 이벤트 처리하기 출처: React 공식 홈페이지 이벤트 처리하기 – React (reactjs.org) 1. React 이벤트 문법 (1) camelCase 사용 (2) 함수로 이벤트 핸들러 전달 예시) **HTML Activate Lasers **React Activate Lasers 2. 기본 이벤트 동작 방지 **HTML 기본 이벤트동작 방지 - return false 사용 Click me **React 기본 이벤트동작 방지 - preventDefault 메서드 사용 > e는 합성이벤트로 그대로 사용하면 된다. 신경쓸 필요 없다.(라고 함) fuction ActionLink(){ function handleClick(e){ e.preventDefault(); console.log('The link was click.. 2021. 2. 1. [React] 5. State와 생명주기 출처: React 공식 홈페이지 State and Lifecycle – React (reactjs.org) 1. 3번째 게시물의 element 예제에서 Clock 컴포넌트를 분리한 것 **전 function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); **후 function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tic.. 2021. 2. 1. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 728x90