[React] React 란? 사용방법 소개 (1)
안녕하세요 오늘은
React에대해서 알아보도록 하겠습니다.
1. React 란? / JSX,Babel 에대해 / 생명주기(LifeCycle)에 대해
2. 간단한 React의 사용방법
1. React 란? / JSX,Babel 에대해 / 생명주기(LifeCycle)에 대해
Google에 React를 검색해보면 나오는 정의는
리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다.
라고 소개가 나와있습니다.
자바스크립트 라이브러리의 `하나` 로써 , 사용자 인터페이스를 만들기위해 사용됩니다!
우리가 흔하게 알고있는 HTML의 문서에 접근하기 위해 ` DOM ` 을 이용하여 문서내의 모든요소를
정의 하였고 , 각각 요소에 접근하기위해 사용하였습니다!
우리는 웹서버를 구현할때 정말 편한 `express`라는 라이브러리를 사용하였습니다.
net 을 통해 구현할수도 있지만 너무힘든점을 보완해주었죠
`React`도 마찬가지로 DOM 방식을 사용하면 너무 힘드니 페이스북과 개별 개발자 형님들이
" DOM 힘들어! Single Page Application(SPA) 구현할래!!"
너네도 쉽게 사용해!!! 그래서 만들어 준 라이브러리 입니다!!
결론!
1. React 는 DOM 조작을 쉽게 하기 위해서 ! 라고 알아두면 좋을것같습니다
2. React 는 데이터가 바뀌면 화면이 바뀐다!!
두번째 결론도 중요한데 , React는 데이터가 바뀌면 ? 화면이 바뀐다 라고 일단 머리에
저장해놓는것도 중요할것 같습니다!
( 이번 포스팅에서는 React의 Class형 Component방식을 알아볼것이다
클래스형 컴포넌트 방식은 state 와 LifeCycle 사용이 가능하다!
)
* LifeCycle ? 컴포넌트가 실행되거나 업데이트 될때,제거될때 특정한 이벤트들이 발생하는것!
- componentDidMount : Render() 이후 즉시 실행되는 함수
- componentDidUpdate : 상태가 바뀔때마다 실행되는 함수!
* JSX / Babel ?
- React는 보통 HTML과 매우 흡사한 JSX 코드로 작성이 된다.
return (
<button
onClick={() => {
this.setState({ isLogin: !this.state.isLogin })
}}
>
{this.state.isLogin ? 'Logout' : 'Login'}
</button>
)
return 값에 HTML 코드가 들어가있다고 해서
HTML코드라고 생각하면 안됩니다!!
본래는
return React.createElement(
'button',
{
onClick: () => {
this.setState({ isLogin: !this.state.isLogin })
},
},
this.state.isLogin ? 'Logout' : 'Login'
)
React.createElement()로 엘리먼트를 만들어 주어야 하지만
우리는 React.createElement()를 자주쓰게 되므로 JSX 코드로 셋업해서
사용해야 합니다
결론 !
React에서는 JSX 코드로 작성하기때문에 ' Babel '을 접목시켜서 React와 같이 사용합니다
Javascript 컴파일러! 라고 생각하시면 됩니다
ex) console.log() 너무 길어요... log()로 사용할래요..!!!
log()가 -> console.log()로 바뀌는것! 입니다
사용방법은 cdn을 불러온 후에
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><body>
<div id="root"></div>
<script type="text/babel">
React Code...
</script>
</body>
script type을 "text/babel"로 바꾸어 사용하면 됩니다!
다음 포스팅에서는 React에 대해 간단 예제와 Component를 세세하게 까보도록 하겠습니다..