[React] React 주요 개념 정리

1. React Component 렌더링 

 

1) 렌더링은 Index.js 에서 실행한다. 해당 document.getElementById('root')가 실행시켜준다. 

- 이 안에서 블럭 쌓듯이 코딩한다.

 

컴포넌트 규칙
1) 컴포넌트의 이름은 반드시 영어 대문자로 시작
2) 컴포넌트는 다른 컴포넌트가 사용할 수 있도록 export 해주어야 한다.
3) 컴포넌트가 다른 컴포넌트를 사용하려면 import 하여야 한다.

 

 

2. JSX 

JSX 규칙 
1) 카멜케이스 원칙: className
2) js : {} 
3) css, style : {{}} + object 

 

알아야 할 문법
1) 가정문 : if-else, swich -> 삼항 연산자
2) 반복문 : for -> map 

3) 스프레드 오퍼레이터 

 

 

3. useState

: state의 값이 바뀌어도 화면을 재렌더링(새로고침) 시킬 필요가 없다.

 

const [변수의 이름, state를 바꿔주는 함수] = useState(sate의 초기 값);

1) 첫번째 인자 : 변수의 이름
2) 두번째 인자 : state를 바꿔주는 함수
3) useState 함수 인자 : state의 초기 모든 Type, 값

4) state의 값을 바꿀 때는 항상 setState 사용
5) setState를 html 태그의 on 속성 호출 : function(){} , 화살표 함수 사용 

 

 

4. react-router-dom@6

1) BrowserRouter로 감싸준다.
2) Routes로 감싸준다.
3) Route에 따라서 정해준다. 
- path(URL 주소)의 규칙에 따라 element가 렌더링된다. 


코딩 규칙
1) index.js에서 BrowserRouter로 App을 감싸준다.

 

 

2) App.js에서 Routes와 Route로만 코딩한다. 

- Header는 항상 Routes 위에 설정해준다.

 

 

a태그 속성

Link 태그 

 

5. props 

: 공통된 부분 빼기, 자식에게 전달 

이름={전달해주고자하는 변수}
이름={전달해주고자하는 함수}

 

 

6. useEffect 

: 리엑트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook이다.
- 컴포넌트가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있다.