패스트캠퍼스 챌린지 8일차 - 리액트 Props, State

 

 

Props

 

이번 강의에서는 Props의 정의라기보다는 사용방법, 컴포넌트를 추출해서 활용하는 이유(재사용성) 등을 강조했다.

 

- Props는 속성, Property의 약자이다. 이는 jsx를 사용하여 커스텀 컴포넌트가 다른 컴포넌터에서 사용되는 구조를 보면 왜 Property라고 명명했는지 쉽게 알수 있다.

 

<Component name="Props" hobby="props2" />

 

위와 같은 표현법을 사용하고 있는데 그냥 한눈에 봐도 html 태그와 유사하다.

컴포넌트는 React 엘리먼트를 return 함으로 props는 자식요소들에 영향을 미친다.

 

props 이름은 컴포넌트 관점에서 명명하는 것을 권장한다.

이는 props를 name, age, hobby로 명명하는 것이 아닌 user로 유의미하게 짓는 것을 말한다.

컴포넌트를 추출할 때 어떤한 의미를 가지고 있는 것이 개별적으로 재사용할 수 있기 때문이다.

(UI 일부가 여러번 사용되거나, 일부가 자체적으로 복잡한 경우 별도의 컴포넌트로 분리하는 것이 좋다.)

 

props는 읽기전용으로 react 컴포넌트는 반드시 자신의 props를 다룰때 순수함수처럼 동작해야한다.

(순수함수 : 항상 동일한 입력값에 대해 동일한 결과를 반환하며, 입력된 값 자체를 변경하려 하지 않는다. )

---

 

State

 

목차는 state지만 ClassComponent와 FunctionalComponent로 같은 기능 구현하는 내용이었다.

 

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

 

1. 상태관리

    클래스 :  constructor(props) 생성자로 state 초기값을 설정해주고, (항상 props로 기본 생성자(super)를 호출해야한다.)

                 별도 함수를 통해 this.setState() 를 호출하여 react가 state 변경된 것을 인지시킨다.

    함수 : useState 훅을 통해 state 초기값을 설정하고 setState로 state값을 변경한다.

 

2. 컴포넌트 마운트, 언마운트시 핸들링

    클래스 : componentDidMount()  - 컴포넌트가 마운트(작동)되어있는 동안 실행될 코드 (컴포넌트가 dom에 렌더링된 후 실행)

                componentWillUnmount() - 컴포넌트가 마운트 해제될때 실행될 코드

    함수 : useEffect 훅으로 마운트되었을때 실행될 코드를 감싸준다.

            useEffect CleanUp(마운트 해제시 실행되는 코드)시 실행될 코드를 return 문 안에 작성한다.

 

state 올바르게 사용하기

 

1. 직접적으로 state 수정하지 않기

2. state 업데이트는 비동기적일 수도 있다.

   비동기적으로 업데이트되어 setState 바로 다음에 해당값을 사용하기 어려울수 있으니,

   기본적으로 기억하고 있는 이전 state 값을 사용해라.

 

  - 이 내용은 이전 프로젝트 때 경험해보았던 내용이다.

    setState 후에 반영이되지 않아 알아보니 모든 setState를 모아 한번에 처리한다는 내용을 보았다. 

    즉 바로 반영되지 않으므로 이전 값을 이용하여야만 한다.

 

 

 

 

https://bit.ly/3FVdhDa

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.