TIL & WIL

항해99_4주차 회고

yeongk0825 2022. 4. 3. 22:32

벌써 항해를 시작한지 4주차가 되었다.

살면서 무언가에 이렇게 집중해 본 적은 없었던 것 같다.

3주간의 주특기 주차가 이어지고 있는데 지금은 마지막 주특기 심화 주차가 진행중이다.

입문때는 이론에 집중하느라 실력이 느는것도 잘 안느껴지고 많이 힘들었는데

심화 주차에서는 배우는 내용이 뭔가 더 실무와 가까워진 느낌이라 그런지  내가 개발을 좋아한다는걸 느꼈다.

간단하지만 그럴싸한 하나의 프로젝트를 만드는 전과정을 a-z까지 차근차근 따라해보고 있는데

뷰를 만들고 기능을 하나하나 넣다보니 어렵지만 너무 재밌다.

항해를 시작하고 신기한 게 하루하루 마음가짐이 달라진다.

불과 저번주만 해도 너무 힘들고, 나아지는 게 안느껴져서 자존감이 바닥을 치는 기분이었는데

지금은 또 항해를 시작하길 잘했다는 생각이 든다. 아직 갈길도 멀고, 모르는 것 투성이지만

매순간 위기가 찾아오더라도 개발을 좋아한다는 마음만으로도 잘 극복할 수 있을거라는 확신이 생겼다.

조만간 프로젝트도 시작하게 될텐데 그 안에서 내 몫을 무사히 해낼수 있도록 최선을 다해야겠다.

 

 

WIL(Weekly I Learned)

※ 클래스형 컴포넌트 vs 함수형 컴포넌트

 : react 컴포넌트를 선언하는 두가지 방식

 

1) 클래스형 컴포넌트

  • class 키워드와 render()메소드가 반드시 필요함
  • state, LifeCycle 관련 기능 사용 가능
  • 임의 메서드 정의 가능
  • this.state로 초기값 설정 필요,  this.setState() 를 통해 state값 변경 가능
  • this.props로 통해 값을 불러올 수 있다.
  • 코드의 재사용성과 코드 구성이 어려움 => 함수형 컴포넌트로 커버 가능

LifeCycle(라이프 사이클)

 : 컴포넌트가 웹페이지에 들어갔다가 사라지기까지의 한 과정.

 

클래스형 컴포넌트에서만 사용.

 

1) DOM : HTML 단위(요소) 하나하나를 객체 취급하는 모델. 트리구조!

 

2) 가상 DOM:눈에 보이지 않는 메모리상에서 돌아가는 가짜 DOM. 

 

어떻게 돌아가?

어떤 행동을 하면(변화) 일단 가상 DOM에 올려(새로 그리기) → 진짜 DOM과 비교 →  바뀐부분만 마지막에 진짜          DOM에 반영

 

진짜 DOM과 가상 DOM을 비교할 때 뭐가 바뀐지 어떻게 알지?

=>그래서 비교를 하기 위해서는 key값이 필요하다!

 

생성 → 업데이트 → 제거 순서로 이루어짐

constructor(생성자 함수) : 컴포넌트에 필요한 어떤 값을 넣어주는 것

 

render : 변경된 내용이 가상 DOM 에서 진짜 DOM으로 올라가는 과정. 

  • New props : 부모가 자식에서 주는 데이터가 바뀌었을 때
  • setState() : 내가 가진 데이터가 바뀌었을 때
  • forceUpdate : 강제로 업데이트 일으킴(강제 수정)
  • 부모 컴포넌트가 업데이트 되었을 때

나 이제 바뀔꺼야! 근데 뭘로 바뀔거야?

=>render 안 return 안에 넣어주기

(Mount는 끝난 상태임)

 

componentDidMount : render가 끝났을때(진짜 DOM에 잘 붙었을 때)

: 첫번째 렌더링이 끝난 후 진짜 DOM에 올라간 뒤 딱 한번만 실행됨. 업데이트(리렌더링) 시에는 실행되지 않음

  • 돔 관련 처리 가능

 

componentDidUpdate : 나 변경사항 업데이트 됐어! (리렌더링)

: 리렌더링이 끝난 후 호출됨( 이미 가상 DOM이 실제 DOM으로 올라간 뒤)

  • componentDidUpdate(prevProps, prevState)

                                                      → 업데이트 되기 전의 prop(부모가 준 거)와 state(내 꺼)

  • 돔 관련 처리 가능

componentWillUnmount : 나 이제 사라진다!

 

 2)그럼 진짜 DOM은 언제 새로 그리지?

  • 처음 페이지 진입 시
  • 데이터가 변해서 마지막에 가상돔에서 변경된 부분이 적용될 때

왜 진짜 DOM에 바로 변경사항을 적용 안해? 그렇게 느려?=> 사이트 구조에 따라서 가상 DOM을 쓰는 것보다 진짜 DOM을 직접 만지는게 더 빠를수도! 아니면 더 느릴수도!

 

props : 부모 컴포넌트. state가 props로부터 데이터를 받아올 경우 변경이 불가능함

state : 생성, 수정이 해당 컴포넌트 내에서만 이루어짐. 그래서 생성도 수정도 자유로움

 

클래스형 <App.js>

import React from "react"; 
import Bucketlist from "./BucketList";

class App extends React.Component{
  constructor(props){
      super(props);
      this.state = {
           list=["a", "b", "c"],
  };
}
    render(){
    	return (
        	<div className = "App">
            	<BucketList  list={this.state.list}/>
        	</div>
    	)
	}
}

export default App;
//return되는 값은 무조건 1개 이상 필요하다(null을 넣더라도 꼭!)

2)함수형 컴포넌트

  • 클래스 컴포넌트의 state, lifeCycle 기능을 사용할수 없어 react Hook(리액트 훅)을 통해 해결함
  • 컴포넌트 선언이 편리함
  • 화살표 함수 사용 가능
  • props를 불러올 필요 없이 바로 호출 할 수 있다.
  • useState 함수로 state를 사용한다.

 

react Hooks(리액트 훅)

: React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,

 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리.

함수형 컴포넌트는 state가 없는 컴포넌트지만 hook이 state를 함수안에서 사용할 수 있게 해준다.

 

useState

: 화면 렌더링과 관련된 데이터를 저장하는 공간

 

const [state명, setState명] = useState(초기값)

import Bucketlist from "./BucketList";
(= import {Bucketlist} from "./BucketList"로 쓸수도 있음)

const App = () = {
  const [test,setTest] = useState('');
  
  const testFunction = () => {
  	setTest(test + 1);
  }
  const name="함수형 컴포넌트"
  return(
      <div>{name}</div>
  );
}

export default App;

useEffect

: 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate와 동일한 동작

 

useRef

: 화면의 리렌더링과 관련 없는 데이터를 저장하고, 같은 값을 유지하고 싶을 때 사용