반응형 전체 글222 [React Document] 이벤트 처리하는 방법 이 포스팅은 React Document 주요개념 이벤트 처리하기 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. React에서 이벤트를 처리하는 방식은 일반 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 하지만 매우 유사할 뿐이지 다른점도 있습니다. 차이점은 React의 이벤트는 소문자 가 아닌 CamelCase를 이용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트를 전달한다. 💡 React 이벤트 소문자가 아닌 CamelCase를 이용한다. HTML에서의 element에 이벤트를 주는 방법은 다음과 같습니다. // DOM에서의 이벤트 버튼 // React에서의 이벤트 버튼 DOM에서는 onclick 을 사용하고 React에서는 Camelcase인 .. 2021. 1. 24. [React Document] State와 생명주기 이 포스팅은 React Document 주요개념 State와 생명주기 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. State에 대해 간단하게만 알아보고 자세한 State내용은 추후 포스팅하도록 하겠습니다. React Document에서는 Clock을 갱신하는 소스코드는 컴포넌트를 만들때 그 안에 props로 date를 넣어줬었습니다. function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tic.. 2021. 1. 23. [React Document] Component와 Props 이 포스팅은 React Document 주요개념 Component와 Props 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. UI를 재사용 가능한 개별적인 여러 조각으로 나눈것을 컴포넌트라고 합니다. 개념적으로 보자면 컴포넌트는 Javascript의 함수와 유사하다. props라는 임의의 입력을 받아 React Element를 반환합니다. 컴포넌트의 시작은 대문자로 시작한다. 컴포넌트는 최대한 쪼개 별도의 컴포넌트로 만드는게 좋다. 💡 함수 컴포넌트와 클래스 컴포넌트 React에서 컴포넌트를 만드는 방식에는 함수로 작성하는방식과 , ES6의 Class를 사용하여 컴포넌트를 작성하는 2가지 방식이 있습니다. // 함수형 컴포넌트 function Profile(props) .. 2021. 1. 22. [React Document] 엘리먼트 렌더링 이 포스팅은 React Document 주요개념 엘리먼트 렌더링 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. 🔧 Element Rendering Element는 React에서의 가장 작은 단위를 의미합니다. Element는 사용자 화면에 표시하기 위한 내용을 기술한다. 앞에 내용에 있던 코드가 위의 내용과 같습니다. const name = Hello YundleYundle 💡 DOM에 Elemenet Rendering 하기 나중에 해당 예제가 무엇을 의미하는지 알수있겠지만 지금은 모른다는 가정하에 보겠습니다 HTML의 DOM 어딘가에 id가 root 인 div가 있다고 가정하겠습니다. React App에는 기본적으로 모든 Element를 React DOM에서 관리하기 .. 2021. 1. 22. 이전 1 2 3 4 5 6 7 ··· 56 다음 반응형
