{22년}[패스트캠퍼스] React & Redux로 시작하는 웹 프로그래밍 7주차 학습일지

SANGHYUN KIM·2022년 6월 18일
0

이번 7주차 정리하기 전에....

이번 주차 강의를 들면서 저번 주차에 적었던 단점이 계속 이어지는지 확인했다.
그 중에 많은 것이 이해가 되었고 가장 크리티컬하게 느끼는 부분은 아래다.

  • 강사님은 우리가 이미 안 다는 것을 전제로 진행하는 느꼈다. 기초역량훈련이라는 취지에 어긋난다고 생각한다. 아무리 코딩은 스스로 찾고 해결하는 것이지만 초보자가 느끼기에는 그냥 맨 땅에 헤딩하는 느낌이다. 적어도 가이드라인이나 앞선 강의처럼 하나씩 해주는 것이 더 나을 것 같다고 생각한다.

그래서 개인적으로 다른 사람들에게 해당 강의를 추천하기 어렵다는 생각은 저번 주차와 똑같다. 그러나 역시 혼자 더 자료를 파고 정리하다보니 습득은 잘 된다.
따라서, 해당 강의를 볼 때 앞선 JS,CSS,HTML과는 달리 수강생이 강의만으로 체득하기 어렵기 때문에 더 많은 시간을 제공하는 강의 외의 자료 및 동영상을 더 찾아봐야만 이해가 가능하다

간단한 7주차 정리

이번 주차는 저번 주차 React맛보기에서 봤던 것들을 공식 문서를 통하여 확인하는 주차다.

React App

  • 개발환경을 미리 세팅이 된 상태를 만들 수 있음. 아래를 타이핑하여 다운 받고 개발환경을 실행
npx create-react-app my-app
cd my-app
npm start
  • 개발환경에서 홈페이지가 표현되는 방식은 아래와 같음

JSX

React.createElement의 간편 표현식이며 다음 4가지를 주의

  • class는 className으로 표현, 그냥 class라고 넣으면 JS의 class로 인식
<div className="App"></div>
  • 변수 넣을 땐 중괄호 → 데이터 바인딩
let post = '강남 우동 맛짐';

<h4>{ post }</h4> //html에 표시됨

<div className={ post }> </div>
  • style을 넣을 땐 style={{스타일명:'갑'}}
//중간에 '-'가 들어가는 것은 camelCase로 작성이 필요
<h4 style={{color : 'red', fontSize : '16px'}}>post</h4> 
//post가 빨간색 글자로 출력
  • return 안에서 무조건 최상위 div 태그 하나만 기재 가능
// 아래처름 불가
return(
	<div></div>
	<div></div> // 최상위 div가 2개인 상태이므로 이 라인을 삭제해야 함
)

Props(속성)

  • 컴포넌트의 속상값을 가지게 함
{/* 이미지는 속성갑을 포함 */}
<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" />
  • 읽기전용 → 변경 불가능
  • 검포넌트에 전달되는 단일 객체
  • 여러 컴퍼넌트를 모아서 합성할 수 있음
  • 컴퍼넌트를 분리해서 사용 가능 → 추출

State

  • 왜 state를 써야할까?
    • 변수를 변경할 때 할당한 변수도 변경하고 홈페이지의 것을 변경하고 렌더링해야하지만, state를 쓰면 자동적으로 html이 변경된 것을 렌더링 해줌
      • 자주 변경될 것 같읕 html부분은 state로 만들기
// 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> //남자 코트 추천 출력
	
  • state 변경하는 방법
let [글제목,b] = useState(['남자 코트 추천', '강남 우동맛짐', '파이선 독학'])
let [따봉, 따봉변경] = useState(0);

/*위에서 봤던 b에다가 변수 변경점을 적용해줌, 문자열 시 변경원하는 문자열 지정 가능*/
//아래 이모지를 누르면 숫자가 올라가게 변경됨
<div className='list'>
  <h4>{글제목[0]} <span onClick={ ()=> { 따봉변경(따봉+1)} }>😀</span> {따봉} </h4>
  <p>217일 발행</p>
</div>
profile
꾸준히 공부하자

0개의 댓글