REACT (1)
[오늘 공부한 내용]
(1) JSX 문법
1. html에 class 넣을 땐 className
2. 변수를 html에 꽂아넣을 때는 {중괄호}
3. html에 style속성 넣고싶으면
<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>(2) 변수 말고 state에 데이터 저장해서 쓰는 이유
-> state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줌
(3) 리액트에서 array/object state를 수정하고 싶으면 독립적인 카피본을 만들어서 수정
(4) 복잡한 html을 한 단어로 치환할 수 있는 Component 문법
1. function을 이용해서 함수를 하나 만들어주고 작명
2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 저장
(5) Component 만들 때 주의점
1. component 작명할 땐 영어대문자로 보통 작명
2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없음
3. function App(){} 내부에서 만들면 안됨
왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법임
component 안에 component 를 만들진 않음
4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 가능
(6) 리액트에서 동적인 UI 만드는 step
1. html css로 미리 UI 디자인
2. UI의 현재 상태를 state로 저장
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성
(7) 자바스크립트 map 함수 쓰는 법
1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줌
2. 콜백함수에 파라미터 아무렇게나 작명하면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력
3. return 오른쪽에 뭐 적으면 array로 담아줌
(8) props로 부모 -> 자식 state 전송하는 법
1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} />
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용
(9) 상위 html로 퍼지는 이벤트버블링을 막고싶으면 e.stopPropagation()
오늘 만든 것
