728x90 반응형 React7 [React Document] 리스트와 Key 이 포스팅은 React Document 주요개념 리스트와 Key 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. React에서 배열을 엘리먼트 리스트로 만드는 방식은 Javascript와 거의 동일합니다 . 일단 Javascript에서 리스트를 만드는 방식은 다음과 같습니다. const numbers = [1,2,3,4,5] const doubled = numbers.map(number => number * 2) React에서 여러개의 element를 렌더링 시키기 위해서는 다음과 같이 사용하면됩니다. function numberBox() { const numbers = [1,2,3,4,5] const elements = numbers.map(number => {numbe.. 2021. 1. 26. [React Document] 조건부 렌더링 이 포스팅은 React Document 주요개념 조건부 렌더링 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. React에서는 원하는 동작을 캡슐화 하는 컴포넌트를 만들수 있으며, Application의 상태에 따라 컴포넌트중 몇개만을 선택해 렌더링할 수 있다. 예제를 보면 다음과 같습니다 function UserProfile() { return 나는 YundleYundle입니다 } function GuestProfile() { return 나는 Guest입니다 } function Profile(props) { const isLoggedIn = props.isLoggedIn; return isLoggedIn ? : } 만약 Profile을 보여주는화면에서 User인지 Gu.. 2021. 1. 25. [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. 이전 1 2 다음 728x90 반응형
