[React] 코딩애플 강의 정리

 

코딩애플에서 React 강의를 수강중에 정리하고자 현재 글을 올려보고자 합니다.

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌

 

 

1.

React에서는 let, const, var 로 변수값을 저장할 수 있다. 또한 useState를 쓰는 경우가 있는데,

자주 변경될 것 같은 html 부분은 state 로 만들어 놓아라. ( 자동으로 재 렌더링 시켜준다. )

 

2.

React에서 state의 값을 변경하고 싶으면 항상 state 변경함수를 사용해야 합니다.

let [좋아요, 따봉변경] =useState(0);

 

좋아요에 1을 더하고 싶다면 함수에 따봉변경(좋아요+1) 을 해야 변경이 됩니다.

 

3.

기존 state가 array/object면 독립적 카피본을 만들어서 수정해야 합니다.

 

4.

어떤걸 컴포넌트로 만들면 좋을까?

1) 반복적인 html 축약할 때

2) 큰 페이지들 만들때

3) 자주 변경되는 UI

 

5.

부모 컴포넌트에 있던 state 데이터를 자식 컴포넌트에서 사용하고 싶다면 props 문법을 사용해야 합니다.

step 1.  <자식컴포넌트 작명 = { state이름 } />

<Modal 글제목={글제목}/>

 

step 2. 자식컴포넌트 함수에 props 파라미터 등록 후 props.작명을 사용합니다. 

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

6.

동적인 UI 만드는 순서

step 1. HTML CSS로 미리 디자인합니다

step 2. 현재 UI 상태를 state에 저장해줍니다.

step 3. state에 따라 UI가 어떻게 보일지 작성합니다.

 

7.

state가 Modal,App에서 필요하다면 App(가장 상위 컴포넌트)에 만들어 놓는게 좋습니다.

즉, state 만드는 곳은 state 사용하는 컴포넌트들 중 최상위 컴포넌트에 만들어야 합니다.

이유 : state는 위에서 밑으로는 전송할 수 있지만 밑에서 위로는 전송하기 어렵기 때문입니다.

 

8.

<input>에 뭔가 입력시 코드실행을 하고 싶다면 onChange / onInput 을 활용하자

<input onChange = {() => { 실행하고 싶은 코드 }}/>

 

9.

react - router는 언제 사용하는게 좋을까? -> 작업해야하는 페이지들이 많을때 사용합니다

ㄴ nested routers는 언제 사용하는게 좋을까? -> 여러 유사한 페이지가 필요할 때 ex) 페이지내에 박스 요소만 변경될 때

 

10.

state를 매 컴포넌트마다 생성하여 쓰지 않고 props를 사용하여 가져오는 이유는 뭘까?

-> 매 컴포넌트마다 state를 생성시 불필요한 데이터가 늘어나며 나중에 수정을 할 때 한곳에서 수정할 것을 두곳 이상에서 수정을 해야 하기 때문이다.

 

11. 

state를 렌더링 할때 변경된 데이터를 저장하고 싶다면 localStorage를 활용하라.

 

 

 

 

... 글 작성 진행중