programming_kr/react11 state와 lifecycle 이 섹션에서는 재사용가능하고 캡슐화된 Clock 컴포넌트를 만드는 방법에 대해 배우게 됩니다. 자체 타이머를 설정하고 매 초마다 스스로 업데이트합니다. function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000); 여기서 중요한 요구사항은 Clock이 타이머를 설정하고 매 초 UI를 업데이트 하는 것은 CLock의 구현 세부사항이어야 합니다. Clock은 한 번만 작성하고 자체적으로 업데이트 시킵니다. ReactDOM.rende.. 2021. 1. 16. 컴포넌트와 props React의 기본 구조는 컴포넌트의 집합입니다. 컴포넌트란 UI를 재사용 가능하게끔 만들어 놓은 여러 조각입니다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 간단한 방법은 javascript 함수를 만드는 것입니다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 props 파라미터를 받은 후 React 엘리먼트로 반환합니다. 이러한 컴포넌트는 javascript 함수이기 때문에 함수 컴포넌트라고 합니다. 또한 ES6의 클래스를 통해 컴포넌트를 정의할 수 있습니다. class Welcome extends React.Component { render() { return Hello, {this.props.name};.. 2021. 1. 13. 요소의 렌더링 const element = 나는 요소이다.; 위와 같은 React앱의 요소는 순수한 객체이고 생성 비용이 저렴합니다. DOM에서 요소 렌더링하기 HTML 파일 어딘가에 태그가 있다고 생각해봅시다. 위 태그는 루트 DOM이라고 부릅니다. 우리가 생성한 React 요소들을 렌더링하게 되면 위 메인 루트에 다시 렌더링됩니다. 생성한 모든 React 요소들은 위 태그에 붙게 된다는 말 입니다. const element = 나는 요소다.; const element2 = () => { return ( {element} 리액트 입니다. ) }; ReactDOM.render( element2, document.getElementById('root') ); 렌더링된 요소 업데이트 React 요소는 변경불가능합니다. 아.. 2021. 1. 10. JSX란? const element = Hello, world!; 위 문법을 JSX라고 부르며 자바스크립트의 문법 확장입니다. JSX는 실제로 UI가 어떻게 보일지 설명하는데 도움을 줍니다. 또한 JSX는 React의 요소를 만듭니다. React는 JSX사용을 필수로 하지 않지만 대부분의 개발자들은 UI 작업시 시각적으로 도움이 된다고 합니다. React를 시작하기 전 JSX를 사용해 봅시다. JSX에 표현식 포함하기 자바스크립트 표현식을 중괄호로 묶어서 요소에 포함시킬 수 있습니다. function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harry', lastName: 'Kane' }; .. 2021. 1. 8. React.js란? 리액트란 무엇인가? 리액트는 자바스크립트의 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지 어플리케이션이나 모바일 어플리케이션의 개발 시 토대로 사용 될 수 있다. 리액트의 특징 리액트를 공부하면서 익혔던 특징은 다음과 같다. React는 선언형이다. React는 컴포넌트 기반으로 재사용성이 뛰어나다. React는 Virtual DOM 기반으로 가볍다. React 컴포넌트는 state와 props를 가진다. 1. 선언형이란? 리액트는 선언형 성격에 맞게 컴포넌트를 jsx문법을 통해 구현한다.(jsx를 사용하지 않을 수도 있지만 대부분의 개발자들은 사용하고 있다) 해당 컴포넌트의 변경사항을 체크하는 알고리즘.. 2021. 1. 3. 이전 1 2 다음
