React 걸음마

갑자기 회사에서 리엑트를 만지게 될 수도 있다는 말을 들었다. 

개발을 다 진행하는게 아니라 내가 하는건 이미 개발 진행중인 프로젝트에 탑승해, HTML 및 CSS 를 건드는 일정도 인데,

리액트에 대한 이해가 없는 상태에서 진행 할 수 없을 거 같아 살짝 발 담군 내용을 적어 볼까 한다. 

 

리엑트를 시작해야하는데, 

node.js 가 다행히 Vue 공부한다고 설치가 되어 있었다.

 

터미널에 

npx create-react-app blog

Vue는 Vue create 프로젝트명 

React는 create-react-app 프로젝트명  으로 시작한다.

 

시작하게 되면 구조는 뷰랑 같다. 다만 src 내 폴더 내용물이 좀 다르다.

 

내가 주로 작업할 곳은 App.js 이다. 

 

react는 js 파일을 통해서 작업을 진행한다. 

 

리액트 파일을 열어보면 신기하다. 분명 자바스크립트인데 안에 html 이 들어가 있다. 신기방기

funtion App(){
	retrun (
    	<div className="App">
        	//HTML 코드 입력
        </div>
    )
}

export default App;

 

이런 형식으로 시작한다. 이게 하나의 컴포넌트인데 루트 컴포넌트 되시겠다. 

 

Vue 는 데이터들을 밑에 따로 마련된 데이터 박스에 넣어두면 되는 형식인데 여기서는 위에서 스테이트를 만들어서 가져오는 방식이다.

 

---

 

funtion App(){

	let [a,b] = useState(0)
    //a는 데이터 바인딩, b는 바인딩한 데이터를 변경할 때 사용
    
	retrun (
    	<div className="App">
        	<p>
            		{a}
            	</p>
            <button onClick={() => {b(a+1)}}>
            	click me!
            </button>
        </div>
    )
}

export default App;

 

뷰도 자바 스크립트 라이브러리지만 리액트는 좀 더 본격적이다. 여기서 부터 뷰가 쉽다는 이유를 알게되었다 ㅎㅎ....

 

뷰는 콧수염이 2개인데 여기는 하나여서 계속해서 2개 입력하다 오류 나기도 한다.

 

뷰는 @click="함수명" 을 지정한뒤 밑에 mothods 박스안에 함수를 저장하고 쓰는게 일반적인 방식이라면 

리엑트는 바로 한줄에 통으로 입력하는 편이 흔한(?) 편인걸까? 

 

onClick={()=>{b(a+1)}} 에서 a의 데이터를 변경해하니깐 b를 통해서 변경 시켜줘야한다. 이점이 쫌 덜 직관적이고 굳이..? 이게 최선일까 생각하다가 Vue를 보면 편안해지는 내 모습을 볼 수 있다. 

 

모달창 만드는것도 삼항연산자를 써야하는둥 여러가지로 복잡하다. 뷰가 좋다.

 

여기까지만 알면 왠만하게  다자인 정도야 수정을 가할 수 있을거 같다.