반응형 개발220 [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. [Raspberry] Vim 설치 Vim 설치 저번에 기본적으로 제공되어있는 vi로 작업을 하려고 했는데 뭔가 자꾸 오류가나서 그냥 Vim을 설치 하기로 했다. 123sudo apt-get updatesudo apt-get upgradesudo apt-get install vim cs 다음의 명령어를 라즈베리에 입력해 준다. apt는 라즈비안에서 사용하는 패키지 관리자를 의미한다.update는 설치된 파일이나 라이브러리의 업데이트 내용이 있으면 갱신해 주는 명령어이다.upgrade는 업데이트가 갱신된 파일이나 라이브러리를 설정하거나 설치하는 명령어이다.그러므로 반드시 update 다음에 upgrade 명령어를 실행하기 바란다.마지막으로 install vim이라는 명령어를 입력해주는것 만으로 vim 의 설치가 완료된다. 문법 하이라이팅 기.. 2017. 6. 11. 이전 1 ··· 11 12 13 14 15 16 17 ··· 55 다음 반응형
