react

$ npx create-react-app folderName

리엑트 작동 방법

react 는 당신이 쓰는 모든 요소를 생성하는 것
( app.js 내용을 index.js 안으로 끼어넣음)

ReactDOM.render(<App />, document.getElementById("root"));

component

: component 리엑트는 컴포넌트와 함께 동작함.

component : html을 반환하는 함수

component 만들기.
1. component 이름은 대문자
2. return ()

주의 react app 은 한번에 하나의 component 만 redering 할 수 있다.

props

component에 정보 보내기

<Food favourite="kimchi" />

function Food(props){
	return <h1>I like {props.fav}</h1>
    
function Food({favourite}){
	return <h1>I like {favourite}</h1>
 
props 내부에서 favourite 를 가져옴

Class Components and State

class App extends React.Component {
	
}

Class Components는 함수가 아니기에 return 하지 않고 render 한다.

react 는 자동적으로 Class Components 의 render method 를 실행함

Class Components를 사용하는 이유
state 를 사용하기 위해

state : object 이고 component 의 다이나믹 data 를 넣을 공간.

Class Components 안에서 변수를 쓸 때는 this 키워드

state의 값을 변경할 때는 setState(새로운 state obecjt) 사용
, 직접적으로 state 값을 변경하면 render를 재시작 하지 않기 때문

this.setState( current => ({count : current.count + 1}))

this.setState({count : this.state.count+1})
같음