728x90 분류 전체보기163 [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. [React] 4. Component와 Props 출처: React 공식 홈페이지 Components and Props – React (reactjs.org) 0. 컴포넌트를 통해 UI를 재사용 가능한 여러 조각으로 나눌 수 있다. elements는 화면에서 보게되는 것이다. 보통 컴포넌트들이 모아져서 만들어진다. 변하지 않는다. 컴포넌트는 props를 받아 elements를 출력하는 함수와 같다. 내 생각에 컴포넌트는 데이터를 받아서 HTML을 구성하는 로직이 첨부된 느낌. 엘리먼트는 그 마지막 결과물. 1. 컴포넌트 정의 방법 (1) 가장 간단한 방법 function Welcome(props){ return Hello, {props.name}; } (2) 또는 ES6 문법 class를 이용 class Welcome extends React.Compo.. 2021. 2. 1. 이전 1 ··· 16 17 18 19 20 21 22 ··· 41 다음 728x90