반응형 2017/06/125 [ReactJS] 컴포넌트와 Props 컴포넌트와 Props 리액트의 가장 큰 장점은 컴포넌트의 조합으로 UI를 짜는 것이다.리액트에서는 컴포넌트를 사용하여 UI를 독립적이고 재사용 가능한 부분으로 분리하며,각 부분을 개별적으로 생각할 수 있다. 개념상 컴포넌트는 javascript의 function과 같다.이 때, 컴포넌트 내부의 props는 임의의 입력을 받아들이고, 무엇이 화면에 나타나야하는지를 설명하는 리액트 엘리먼트를 반환한다. 함수와 클래스 컴포넌트 123function Welcome(props) { return Hello, {props.name}; }Colored by Color Scriptercs 컴포넌트를 가장 쉽게 정의 하는 방법은 function을 사용하는 것이다.이 함수는 하나의 props 객체를 인수로 받아들이고 Rea.. 2017. 6. 12. [ReactJS] 랜더링(Rendering) 랜더링(Rendering) 엘리먼트는 리액트 어플리케이션에서 가장 작은 단위이다.엘리먼트는 화면에서 보여지는 것에 대한 정보를 가지고 있다.브라우저 엘리먼트인 DOM 엘리먼트와는 달리, 리액트 앨리먼트는 일반 객체이므로 값 싸게 만들수 있다.React DOM은 React 앨리먼트와 일치하도록 DOM을 업데이트 한다. 리액트에서 앨리먼트와 컴포넌트를 헷갈릴수 있는데, 컴포넌트에 대한 자세한 설명은 다음 포스팅에서 다루도록한다.그전에, 간단하게 설명하자면 엘리먼트는 컴포넌트가 무엇인지를 나타낸다고 할 수 있다. 엘리먼트를 DOM에 랜더링 하기 12345const element = Hello, world; ReactDOM.render( element, document.getElementById('root')).. 2017. 6. 12. [ReactJS] JSX JSX 1const element = Hello, world!; cs다음과 같은 변수 선언을 고려해보자.이 태그는 html이나 문자열이 아니다.이것은 JSX라고 불리는 자바스크립트의 새로운 확장된 문법이다.리액트 개발자들은 리액트 라이브러를 통해 UI를 표현 하기 위해서 JSX 문법을 사용하기를 추천한다.JSX를 템플릿 문법이라고 생각할 수도 있지만, 어느 문법보다 강력한 기능을 제공한다. 가장 중요한 점은 JSX는 리액트의 앨리먼트를 생성한다는 것이다.다음 포스팅에서 엘리먼트를 HTML DOM에 랜더링하는 방법이 있을 것이고,우선은 JSX를 사용하는 방법에 대해서 알아보도록하자. JSX에 자바스크립트 문법 포함하기 12345678910111213141516171819function formatName(.. 2017. 6. 12. [ReactJS] Hello world! Hello world! 튜토리얼부터 포스팅하고 기능을 설명하는건 순서가 안맞는 것 같지만, 리액트에 대한 기본 지식이 없다면 여기서 라이브러리 사용방법을 익히고 튜토리얼로 돌아가도 좋다. 어떤 언어를 익히건 초기에는 콘솔창에 Hello world를 띄우기 마련이다똑같은 원리로, 리액트에서도 리액트만의 문법을 사용하여 Hello world를 출력해 보도록하자. 그전에, 리액트는 로컬에서 실행환경을 갖추고 작업해도 되지만,Codepen이라는 브라우저 기반 환경에서도 원활히 돌아가기 때문에, 실습 시 이 사이트를 추천한다.Hello world를 미리 짜놓은 페이지는 다음과 같다.https://codepen.io/gaearon/pen/ZpvBNJ?editors=0010 1234ReactDOM.render( He.. 2017. 6. 12. 이전 1 2 다음 반응형