패스트캠퍼스 react 강의 학습후기 7주차

리액트 공식 문서를 보면서 공부해본다.

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

공식 문서에서 jsx를 소개해 주고 있다.

 

개발자는 공식 문서를 참고할 일이 아주 많이, 매우 많이 생긴다.

7주차는 리액트를 강사님과 함께 현명한 공식 문서 읽는 법을 배우며 진행하는 주차이다.

 

element 

 

엘리먼트는 리액트의 가장 작은 요소이다. 엘리먼트는 화면에 표시할 내용을 기술한다. React DOM은 UI가 변경될 경우 변경된 내용만 업데이트한다. 

const element = <h1>Hello, world</h1>;

 

 

component 만드는 법

 

return ( ) 안에 html 문법을 작성할 수 있다. js문법은 return의 바깥에서 사용해야 하고, return 안에 사용하고자 할 경우 중괄호 { } 를 사용해야 한다.

 

function App() {
return (
<Modal></Modal>
)
}

function Modal() {
return ( 
<h1> 컴포넌트를 제작하는 첫 번째 방법 </h1>
)
}

const Modal2 = () => {
return (
<h2> 컴포넌트를 제작하는 두 번째 방법 </h2><h3> 화살표 함수를 응용하며, const 대신 let을 사용해도 된다. </h3>
)
}

 

동적인 ui는 state에 상태를 저장해 만들 수 있다. 먼저 html, css에 디자인을 완성한 뒤 보여줄 ui의 상태를 state에 저장하고, state에 따라 ui가 어떻게 보일지 작성한다. 리액트에서 자주 사용되는 state는 다음과 같이 선언한다.

 

let [stateName, setState] = [1,2,3] 

 

if문 대신 삼항 연산자를 사용할 수 있다.

 

조건문 ? : true일 때 실행할 문장 : fasle일 때 실행할 문장 

 

props는 부모의 state를 가져다 사용하고 싶을 때 사용한다. 이때 자식과 자식 사이의 state 교환, 자식으로부터의 부모에게로 state 전송은 불가능하다.

 

사용법 

- 부모의 요소를 사용할 자식 컴포넌트에 작명={state이름}  형식으로 가져다 사용할 state를 명시해준다.
- 자식 함수의 파라미터에 props를 넣는다.
- props.작명 형식으로 부모의 state를 가져와 사용한다. 
그러나 state는 비동기식 처리로 한발짝 늦게 처리되기 때문에, 이 점을 유의하여 사용해야 한다.

 

 

이벤트 버블링은 클릭 등의 이벤트가 상위 요소로 퍼지는 현상을 말하는데, 이 현상을 막으려면 e.stopPropagation()을 사용하면 된다.