[React 기본] React 시작 전 기본개념 정리 (class와 함수형, jsx, public과 src폴더)

class 와 함수형 컴포넌트의 차이

기존(16.8.0 이전)

class	function
관련된 데이터와 함수가 하나로 묶여져 있는 형태	javascript에서 쓰던 흔한 함수
state라는 데이터 묶음과 라이프사이클 훅이 들어있음	<< 이런거 없고 한가지 기능을 수행하는 단위!!!
state값이 바뀔때마다 render함수가 자동으로 실행되어 업데이트됨.	당연히 이런거 안됨
따라서 동적인 구현을 위해서 class를 많이 사용	정적인 구현을 할때에 function을 사용

 

현재(16.8.0)

16.8.0 버전 이후부터는 함수형에도 리액트 훅이 도입되어 state, 라이프사이클 훅 모두 사용가능하다.

 

---

그런데 왜 ?? class를 기존에 쓰고 있었고 다른게 없는데 함수형으로 해야하나요 ??

• class형식의 언어를 사용해보지 않은 사람들은 function보다 class가 익숙하지 않다는 의견
• 변수 접근이 this를 굳이 안붙여도 됨
• functional programming이 유행이라 react로 점차 따라가게 됨
• 중복된 걸 조금 더 줄일 수 있음

* 그러나 회사마다 팀마다 기존에 쓰고 있었을 수도 있고 호불호가 갈리는 부분이라 둘 다 알아야 한다.

 

 

---

jsx란 ?

문자열도 아니고 html도 아님 ! 엄밀히 말하면 javascript이다. 자바스크립트를 확장한 것이라고 보면 된다.

포인트1. class는 className으로

포인트2. onclick은 onClick으로 꼭 가운데 C 대문자로 !

포인트3. 변수는 중괄호 { }로 감싼다.

포인트4. 하나의 태그로 감싸야한다.
  - 이때 불필요한 div로 감싸기 보다는 React.Fragment로 감싸거나 <></>빈 태그로 감싼다.

//1.React.Fragment
<React.Fragment>
	<h1></h1>
	<p></p>
</React.Fragment>

//2. 빈태그
<>
   <h1></h1>
   <p></p>
</>

포인트5. 배열을 돌려보기

{
	['a','b'].map(item => {
		<h1>{item}</h1>
	})
}

 

 

 

---

폴더 구조

public 정적인 요소들
src 동적인 요소들 (실제 작업 폴더라고 생각하면 된다.)