[React.js] 1. props

1. 코드펜 다운로드 사이트

https://codepen.io/

불러오는 중입니다...

위의 사이트에 가서 Sign Up 클릭

자신이 원하는 방법으로 간단한 회워가입

 

2. 메인으로 이동

 

 

2-1. CREATE

새로운 Pen (대쉬보드)를 만들거나 다른 개발자가 만들어 놓은 소스들을 보고 공부 할 수 있다.

 

2-2 Your

내가 만들어 놓은 DashBoard 와 나의 프로필 등등

 

 

 

+ CREATE에서 새로운 Pen을 눌러서 추가하자.

자동으로 HTML, CSS, JS 부분으로 나누어서 생성 되고 이곳들에 소스를 작성 하면된다.

Ctrl+S 자동 저장 기능 있고 우측 상단에 [저장], [설정], [뷰 변경]이 있다.

 

+ Settings를 눌러서 환경 설정 및 외부 라이브러리를 추가할 수 있다.

Settings 이미지

JavaScript로 들어와서 JavaScript Preprocessor에서 Babel을 선택

Add External Scripts/Pens (외부 라이브러리/펜) 들을 Search 란에 검색하여 아래의 것들을 추가한다.

 

띵앤띵은 리액트를 학습하기에위해 아래의 3개의 라이브러리를 추가함

1. https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js

2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js

3. https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.js

1,2번은 React라이브러리

3번은 propTypes과 defaultProps 설정을 위해 라이브러리 추가

(기존에는 직접 선언해서 propTypes들을 만들어서 사용했어야했는데 최근에는 라이브러리로 따로 나와있다 !)

 

this.props.name   --- Hello UnKnown

this.props.number -- number 

this.props.children -- I am 띵앤띵

 

 

띵앤띵은 위와 같이 작성해보았다! 정상적으로 작동하네요~

 

이상 CodePen을 이용하여 propTypes 설정하여 helloworld 찍기!!

 

참고: https://www.youtube.com/watch?v=i_ooWEUtCMc