09.29.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-5~1-9 챕터리뷰

728x90

[오늘 새롭게 알게된 것]

1. Props의 단어기원과 용도 및 디폴트값은 true로 할당됨

properties의 줄임말임. 용도는 어떤 값을 컴포넌트에게 전달해주어야 할때 사용됨

이때 전달해주는 값은 객체로 전달됨. 예를 들면 App 컴포넌트에서 Hello컴포넌트로 값을 전달해주고 싶을땐

App컴포넌트안에 <Hello name='블루불페'/>를 사용하면 아래와 같이 사용가능함

Props의 내부의 값을 참조할땐 props. 을 이용하면 됨

아무값도 할당안되고 props가 선언만 된경우 true로 초기화 됨

def function Hello(props){
return (
let myName = {props.name}
<div>내이름은 {myName}</div>
)
}

2. 비구조화 할당은 props 사용 편의성 증대시킴

function Hello(props) {return(<></>)} 대신에 function Hello({name}) {return(<></>)} 해주면됨

만약 컴포넌트 객체 키값이 여러개 존재한다면 순서상관없이 동일한 키명을 {A, B, .., N} 으로 비구조화 할당해주면 끝!

3. 특정 A 컴포넌트 태그에 B라는 컴포넌트 넣고싶으면 A파라미터에 children 넣어주셈

function A( { children } ){ return ( <> { children } </>) }

마치 샌드위치처럼 A라는 컴포넌트 태그를 닫기전 B 컴포넌트를 집어넣고 싶을때
화면에 원하는대로 렌더링이 되지 않아 당황했던 기억이남.

이유는 Wrapper컴포넌트에 해당 컴포넌트를 렌더링 시켜주지 못해서 그런거였음.

이건 마치 Wrapper라는 노드 아래 Hello노드를 자식노드로 붙여주는 느낌이라 이해되었음.

사용할땐 js이기 때문에 <children/>이아닌 {children}임 주의.

4. 단축평가 논리계산법(short-circuit evaluation)을 알게됨

<div> { isChecked ? <>맞아요<> : <> 틀렸어요 < />}

단순 A리턴값이 true냐 false냐 확인후 B액션을 취하는 논리라면 if (A) {..} 대신 A && B로 표현해주면 편함

단 A가 참이냐 거짓이냐에 따라 참이면 B 거짓이면 C를 취하는 경우 삼항연산자를 활용하는것이 좋음

리엑트에서 삼항연산자도 동일하게 문법따름. { A ? B : C } 단, B엔 jsx 객체가 들어감 주의.

5. 리액트 16.8이전과 이후 함수형 컴포넌트 사용 온도차 몹시 큼

Hooks 기능은 리액트 16.8때 등장함. useState라는 함수는 리액트 Hooks중 하나임!

그녀가 등장하기 전까진 일급객체의 특징중 하나인 클로저라는 특성때문에

모든 함수형 컴포넌트는 렉시컬 환경내부 전역변수까지만 접근 가능했음.

즉, 함수형 컴포넌트에선 외부 컴포넌트 전역상태관리가 불가능해진거임.

그런데 Hooks 그녀의 등장으로 느슨해진 컴포넌트 세계에 긴장감을 주었음.

5. onClick={function()}로 코드작성히 성공적인 렌더링전에 이미 함수가 호출되는 불상사 발생주의

반드시 onClick={함수명()}이 아닌 onClick={함수명}로 작성해줘야됨.

6. 컴포넌트 최적화에 쓰이는 함수형 업데이트 기법

let [number, setNumber] = useState(0)의 number = setNumber((prev) => prev+1)

이 책을 읽기 전까진 useState의 setter함수 파라미터에 새로운 파라미터를 할당하는 방법만 알았음.

이게 컴포넌트 최적화하는데 몹시 좋다고하는데 왜인지는 책후반에 나온다고함.

대략 예상해보면 아마도 number명이 변경되어야 하는 상황일때

다른 컴포넌트에서 number state를 할당 받은 곳에서도 number값에 접근한다면

만약 컴포넌트가 한두개이면 모르겠지만 수백개 수천개라면..?

일일이 number대신 새로운 변수명으로 수정작업하는 번거로움이 있을것으로 예상됨.

이래서 컴포넌트 최적화도 신경써야 되는구나 깨달음. 재밌당 리액트.

7. input태그 상태관리는 onChange를 사용함

단 input 상태를 관리할때는 value값도 설정해주는것이 중요함. 이를통해 input태그 value값이 업데이트 가능해짐.

ex.
...생략
let [text, onReset] = useState('')

return(
<input onChange={onReset} value ={text}
)