리액트 기초오브기초

리액트 JS라이브러리

 

아래의 cdn을 넣어주면 바로 react와 babel을 쓸 수 있다.

react : 리액트가 동작하는 핵심적인 코드가 들어있다.

react-dom : 바뀐 값을 찾아서 그 영역만 바꿔주는 걸 도와주는 역할, 리액트 코드를 웹에다가 붙여주는 역할

  <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

 

 

리액트로 엘리먼트 생성

 

React.createElement(인자 3개)

 

1/ element명

2/ 속성값 : 여러 속성값 넣을 땐 객체 형태로 넣는다. {id:'ingoo', class:'ingclass'}

 이벤트핸들러를 넣어주고싶다면 카멜케이스로 넣어줘야한다. (onClick 이렇게)

3/ innertext,innerHTML 같이 태그 안에 들어갈 내용들

// 속성값이 없을 때
const btn = React.createElement('button', null, '버튼')

// 속성값 있다면,
const btn = React.createElement('button', {
			onClick : ()=>{console.log('clicked!!')}, type : 'submit'
            			},'버튼')

 

좀 더 좋은 가독성을 위해 아래처럼 babel/JSX 를 쓸 수 있다.

 

HTML 문법을 JS 영역 내에서 쓸 수 있게 도와주는 것 => babel/JSX

<script type = 'text/babel'>
const btn = <button id={id}> 버튼 </button>
</script>

 

element를 함수나 클래스에 담는 행위

 

클래스로 담기

(클래스로 컴포넌트를 만들시엔 내부에 render()함수를 꼭 써주어야 한다)

class App extends React.Component{
	render(){
    	return(
        <button>버튼</button>
        )
    }
}

함수로 담기

const App = () => {
	return (
    <button>버튼</button>
    )
}

 

 

여러 엘리먼트를 쓰려고 하면 부모 엘리먼트가 있어야 한다.

근데 이때 부모 엘리먼트가 굳이 필요 없다면, <React.Fragment> </React.Fragment>로 대신 감싸주면 된다.

 

결과물을 jsx로 반환해주기 때문에 render 해줄 시 <App />이라고 써서 컴포넌트로 사용해야한다.

 

ReactDOM.render(렌더할 컴포넌트, 컴포넌트를 넣을 위치)

ReactDOM은 기본적으로 하나의 컴포넌트만 실행해준다.

ReactDOM.render(
   <App />
   , document.querySelector('#root')
    )
 }
 // root라는 div안에 저 App 컴포넌트를 넣어서 렌더해줘