안녕하세요? 두번째 시간에는 개발환경설정에 대해서 연재할 예정이였습니다.
하지만, 로컬(컴퓨터)에 개발환경을 설치하지 않아도 웹으로도 실습이 가능하여,
설치는 다음에 필요한 시간으로 미루고,
React에 주요 개념들을 먼저 살펴보도록 하겠습니다.
제가 이번시간부터 몇 회에 걸쳐서 참고할 인터넷 강의는 무료이며,
인프런에서 무료로 수강이 가능합니다.
(회원가입이 귀찮으시면 유튜브에서 리액트를 검색하셔서 참고하셔도 됩니다.)
- 인프런 사이트에 들어가셔서 react를 검색하신 후에
[ React & Express 를 이용한 웹 어플리케이션 개발하기 ] 강의 입니다.
실습이 가능한 아래 사이트로 이동해보도록 하겠습니다.
오른쪽 위에 빨간색 settings를 클릭 하고
아래 숫자 순서대로 클릭을 해줍니다.
3번 Quick-add 에서 react 을 선택하고 ,
react-dom을 한번 더 선택하시면
위와 빨간 네모처럼 적용될 것입니다.
ES6는 자바스크립트 최신문법 입니다.
아래 예제에 나오는 Class는 ES6에 새로 도입된 문법입니다.
- javascript Class 가 궁금하시면 아래 링크를 참조하세요.
위와 같이 타이핑을 직접 해 보세요.
자동완성기능이 없어서 오타가 날지 모르니 아래 스크립트를 복사해놓겠습니다
첫번째 실습인데 결과물이 나오지 않으면 포기하실 수도 있으실까봐
여러분들 위한 저의 작은 배려(?)입니다.
(사실 저도 처음부터 오타가 나서 오타 찾느라 시간이 오래 걸렸던 것은 비밀입니다.)
앞으로는 잘 하실 수 있을 것이라고 믿고 따로 타이핑 한 것을 복사해 놓지는 않을게요.
====================================================================
- HTML 내용 :
<div id="root"></div>
====================================================================
- JS 내용 :
class Codelab extends React.Component {
render(){
return (
<div>React 왕초보</div>
);
}
}
class App extends React.Component{
render(){
return(
<Codelab/>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
====================================================================
JSX 의 몇가지 특징에 대해서 알아보겠습니다.
1. Nested Element
/* 컴포넌트에서 여러 Element를 렌더링 할 때
꼭 container element 안에 포함시켜주세요 */
아래 <div> </div> 안에 넣으라는 의미로 저(?)는 이해 하였습니다.
render() {
return (
<div>
<h1>Hi</h1>
<h2>Yay! Error is gone.</h2>
</div>
)
}
2. JavaScript Expression
/* JSX 안에서 JavaScript를 표현하는 방법은 간단합니다.
그냥 { } 로 wrapping 하면 됩니다. */
아래 실습화면에 let 이 사용되었는데 , 관련해서 설명은 아래 설명을 참고해주세요.
let으로 선언한 변수는 변수를 선언한 블록과 그 내부 블록들에서 유효하다. 이럴 경우, let은 var와 같이 동작한다. 가장 큰 차이점은 var 변수의 유효 범위는 전체 외부 함수까지라는 점이다.다시 직접 타이핑을 해보세요.
변경된 부분은 빨간색으로 표시하였습니다.
여러분들도 아래 흰색 화면에 잘 출력되었죠?
3. Inline Style
/* JSX 안에서 style 을 설정 할때는, string 형식을 사용하지 않고
key 가 camelCase 인 객체가 사용됩니다. */
camelCase란?
다 소문자로 camelcase라고 쓰는 것이 아니고
단어가 이어질때 첫글자는 대문자로 해주는 것이라고 저(?)는 이해하고 있습니다 .
예) camelcase (x) -> camelCase (o)
또 직접 타이핑을 해봅시다. 추가되는 부분을 빨간색으로 친절하게(?) 표시하였습니다.
4. Comments
/* JSX 안에서 주석을 작성 할 때는
{ /* ... */ }
형식으로 작성하세요.
주의 하실점은 이 역시 Nested Element 부분에 설명했던것과 같이
container element 안에 주석이 작성되어야 합니다. */
render() {
return (
<div>
{ /* This is How You Comment */ }
{ /* Multi-line
Testing */ }
React CodeLab
</div>
);
}
이상으로 ES6 Class 와 JSX 에 대해서 알아보았습니다. 잘 이해 되셨나요?
다음 시간에는 React.js 의 가장 기본적이고 핵심적인 기능인
props를 알아보려고 합니다.
오늘도 전문성과 친절함이 부족한 긴 글을 읽어주셔서 고맙습니다.
'React > 왕초보 도전' 카테고리의 다른 글
| 6. 간단한 영화 웹 서비스 만들기 1 (0) | 2017.12.19 |
|---|---|
| 5. component mapping , 간단한 주소록 구현 (0) | 2017.12.19 |
| 4. state 소개 , Counter 웹 만들어보기 (0) | 2017.12.19 |
| 3. props 소개 (0) | 2017.12.19 |
| 1. React 소개 (0) | 2017.12.19 |