이번 주차 강의를 들면서 저번 주차에 적었던 단점이 계속 이어지는지 확인했다.
그 중에 많은 것이 이해가 되었고 가장 크리티컬하게 느끼는 부분은 아래다.
그래서 개인적으로 다른 사람들에게 해당 강의를 추천하기 어렵다는 생각은 저번 주차와 똑같다. 그러나 역시 혼자 더 자료를 파고 정리하다보니 습득은 잘 된다.
따라서, 해당 강의를 볼 때 앞선 JS,CSS,HTML과는 달리 수강생이 강의만으로 체득하기 어렵기 때문에 더 많은 시간을 제공하는 강의 외의 자료 및 동영상을 더 찾아봐야만 이해가 가능하다
이번 주차는 저번 주차 React맛보기에서 봤던 것들을 공식 문서를 통하여 확인하는 주차다.
npx create-react-app my-app
cd my-app
npm start
React.createElement의 간편 표현식이며 다음 4가지를 주의
<div className="App"></div>
let post = '강남 우동 맛짐';
<h4>{ post }</h4> //html에 표시됨
<div className={ post }> </div>
style={{스타일명:'갑'}}
//중간에 '-'가 들어가는 것은 camelCase로 작성이 필요
<h4 style={{color : 'red', fontSize : '16px'}}>post</h4>
//post가 빨간색 글자로 출력
// 아래처름 불가
return(
<div></div>
<div></div> // 최상위 div가 2개인 상태이므로 이 라인을 삭제해야 함
)
{/* 이미지는 속성갑을 포함 */}
<img src="image.jpg" width="100" height="100">
{/*아래 컴포넌트들에게도 속상갑을 부여하고 싶음*/}
<Header></Header>
<Nav></Nav>
<Article></Article>
{/*그래서 만들어낸 것이 아래와 같이 컴포넌트에 속성을 주면서 재활용성을 높이게 됨*/}
function Header(props){
return <header>
<h1>{props.title}</h1>
</header>
}
{/* 해당 컴포넌트에 담고 있는 함수가 title이라는 props(속성)을 받고 출력 실행 */}
<Header title="React" />
// JS에서 자료보관은 변수지정을 했는데 React에서는 잠깐 저장할 때 state를 사용함
/*REACT*/
import { useState } from 'react';
function App() {
/*-----Destructing 문법-----*/
//"let a or c = 1 or 2" 와 같은 케이스
let [c, d] = [1, 2];
// 위 함수 선언과 같은 형식으로 아래를 이해하면 됨
// 아래 a 사용 시 state에 보관한 자료가 출력
// 아래 b state 변경도와주는 함수
let [a,b] = useState('남자 코트 추천') //실제로는 ['남자 코트 추천', 함수]로 인식
<h4>{ a }</h4> //남자 코트 추천 출력
let [글제목,b] = useState(['남자 코트 추천', '강남 우동맛짐', '파이선 독학'])
let [따봉, 따봉변경] = useState(0);
/*위에서 봤던 b에다가 변수 변경점을 적용해줌, 문자열 시 변경원하는 문자열 지정 가능*/
//아래 이모지를 누르면 숫자가 올라가게 변경됨
<div className='list'>
<h4>{글제목[0]} <span onClick={ ()=> { 따봉변경(따봉+1)} }>😀</span> {따봉} </h4>
<p>2월 17일 발행</p>
</div>