분류 전체보기327 [공식문서] 조건부 렌더링 1. 조건부 렌더링 이란? React에서의 조건부렌더링은 자바스크립트에서의 조건 처리와 같이 동작한다. if 나 조건부연산자에 따라 현재 상태를 나타내는 엘리먼트를 만들면 React가 현재상태에 맞게 UI를 업데이트 할것이다. * 예제 ( 사용자의 로그인 상태에 맞게 컴포넌트 중 하나를 보여주는 greeting 컴포넌트로 이해해보자.) function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; } ReactDOM.render( // Try changing to isLoggedIn={true}: , document.getElementById('root') ); isLoggedIn pr.. 2021. 8. 26. [공식 문서]이벤트 처리하기 - React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다. ※ 캐멀케이스 : 낙타의 모양에서 따온 방법이다. 첫번쨰는 소문자로 시작하고 두번쨰 단어부터 대문자로 시작한다. 단어와 단어 사이는 붙인다. - JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. ex) Activate Lasers - React에서는 false를 반환해도 기본 동작을 방지 할 수 없으므로 반드시 preventDefault를 명시적으로 호출해야한다. function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( Submit ); } 위에서 e 는 합성이벤트 .. 2021. 8. 26. clearQueue() 메서드 clearQueue() 메서드는 진행중인(첫번 째) 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거한다. * 예제 내용1 내용2 2021. 8. 25. queue() / dequeue() 메서드 queue() 메서드는 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가하며, 실행하면 실행 이후의 모든 애니메이션이 취소된다. dequeue() 메서드는 실행 이후 적용된 애니메이션 메서드가 취소되지 않게 연결해준다. * 예제 내용1 2021. 8. 25. 이전 1 ··· 33 34 35 36 37 38 39 ··· 82 다음