ref

현재까지는 state를 바꾸면 React가 알아서 화면을 변경해줬다. 그래서 우리가 직접 DOM을 참조할 필요가 없었지만 만약에 input에 focus를 주고 싶은 경우에는 어떻게 할까?

기존 바닐라에서는 아래와 같이 하면 됐다.

document.querySelector("input").focus();

하지만 React에서는 대부분 document.querySelector를 사용하지 않는다.

React가 화면을 컨트롤 할 수 있게 해주는 것이 중요하다. 

최대한 React가 제공해주는 것을 사용하자. 이때는 ref를 사용하면 된다.

input;

return (
...
<input ref={(c)=>{this.input = c;}} type="number" />
...
)

input을 선언하고, jsx에서 ref={(c) => {this.input = c; }}

input을 사용할 때는 js 부분에서 아래와 같이 사용 가능.

this.input.focus();

>>>> 따로 메서드로 빼면 아래와 같이 간편해진다.

onRefInput = (c) => {this.input = c;}

return (
	...
	<input ref={this.onRefInput} type="number" />
    ...
);

state를 변경했을 때 일어나는 일

setState를 할 때 reder()함수가 재호출되면서 리렌더가 일어난다.

해당 개념이 중요한 이유는 나중에 렌더를 너무 많이 하면 느려진다. render에 10초 걸리는 작업이 있다고 하면 state를 변경할 떄마다 10초씩 걸린다고 생각하면 된다.

 jsx부분의 onChange, onSubmit, ref 이런 부분도 모두 render()함수 위의 js 부분에 선언하는 것이 좋은 이유이다. 만약에 jsx 부분에 inline으로 onChange, onSubmit과 같은 함수를 작성해버리면 state를 변경할 때마다 똑같은 함수가 계속 생기게 된다. (state를 변경하면 render()가 재호출되기 때문)

React 리액트 기초부터 쇼핑몰 프로젝트까지!

react 공부를 하고싶어서 유료 강의를 사서 보았다.

코딩애플 아저씨 예전부터 유튜브로도 보고 ES6 유료 강의도 봤었는데.. 후기를 리스트 형식으로 간단하게 적어보려고 한다!!

1. 설명 이해가 쏙쏙되게 말을 찰지게 하심
2. 응용이 되게 원리를 설명해주실 때가 많음 → 하지만 막 엄청 깊숙히 설명 해주시지는 않고 딱 간결하게? 오히려 이게 더 좋은거 같기도 하다.
3. 왜 써야하는지 이유를 설명해주시니 2번과 같이 응용할 때 많은 도움이 된다.
4. 중요한 것들은 계속 자막으로 반복해서 띄워주셔서 머릿속에 강제로 주입시켜야하는 느낌 (이런것들은 진짜 외워야 원할히 진행가능 할 때 많음..)
5. 과제를 내줘서 혼자 정리하고 생각할 시간을 주심 → 정답도 있어서 코드 비교 가능★
6. 5번과 비슷한데 과제를 내주는데 정답에 뭔가 빡치는 문장 써놔서 정답 안보고 풀게 해놓으심..

써놓고 보니 대부분 장점인데.. 그만큼 괜찮은 강의였다.  부가 설명을 하자면

1번 장점은 인상깊은 설명이 props를 설명해주실 때 불륜, 패륜이다.

6번 장점은 예를 들면 아래와 같은것들..

누군가에게는 기분이 나쁠수도 있지만 저는 오히려 좋아♥

물론 6번은 평소에는 동기부여가 되는 문장을 써주신다.

이상입니다아아