inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

실전 리액트 프로그래밍

ref 속성값으로 자식 요소에 접근하기

ref 관련 질문있습니다!

해결된 질문

287

최연수

작성한 질문수 3

1

<input ref={ref => ref && setText(INITIAL_TEXT)}>라는 코드에서 

ref && setText(INITIAL_TEXT) 

ref 가 <input> 객체를 의미하는 건 알겠는데

이게 어떤 의미고 어떻게 작동하는건지 쉽게 와닿지가 않아서 설명 부탁드려요!

redux react

답변 3

1

이재승

&& 연산자는 AND 연산자가 맞구요, 첫 false 를 만날 때까지 계속 평가(evalution)를 합니다
`a && b && c` 에서 a와 b 모두 true 이면 c가 평가됩니다
반대로 a와 b 중에서 하나라도 false 이면 c는 평가되지 않습니다.
c가 만약 함수 호출이라면 `평가 = 함수 호출` 이라고 이해하시면 됩니다

그래서 `ref && setText(INITIAL_TEXT)` 는 ref 가 있으면 `setText(INITIAL_TEXT)` 를 실행하라는 의미가 됩니다
사실 if 문을 써도되는데요
&& 연산자가 좀 더 간결해서 이 방식을 선호하시는 분들도 있습니다 (if 문을 선호하시는 분들도 있구요)

1

최연수

아 작동방식에 대한 설명은 이제 이해가 완전히 된 것 같습니다! 그런데 ref && setText(INITIAL_TEXT) 부분에서 &&은 기존 자바스크립트 문법처럼 and연산자의 의미로 이해해주는건가요?
ref요소가 생성되면 => setText를 실행해라

ref요소가 없으면(null) => 실행하지마라 이런식으로 이해하면 될까요?

1

이재승

안녕하세요
리액트에서 ref 를 입력하는 방식은 두 가지가 있는데요
useRef 를 이용하는 방식이 일반적입니다
하지만 useRef 는 요소가 생성되고 소멸되는 이벤트를 받을 수 없다는 단점이 있습니다.

첨부해주신 코드는 ref 에 함수를 입력하는 방식입니다
ref 에 함수를 입력하면 요소가 생성되고 소멸될 때 해당 함수가 호출됩니다
단, 소멸될 때는 ref 매개변수의 값은 null 입니다
따라서 `ref && setText(INITIAL_TEXT)` 는 요소가 생성될 때 `setText(INITIAL_TEXT)` 를 실행하는 코드입니다

요소가 생성되고 소멸될 때 호출된다고 했지만, 그외에도 호출되는 경우가 있는데요
입력된 함수가 변경될 때 입니다
위 코드처럼 입력하면 렌더링될 때마다 매번 새로운 함수가 입력되죠
그래서 요소가 생성되고 소멸되지 않아도 (위 코드에서는) 입력된 함수가 호출됩니다

자동완성기능이 안되네요 ..

0

532

3

화면에 에러가나네요 ...

0

539

2

setValue 함수 질문 있습니다.

0

855

1

찾아야한다 실습 문의

0

485

1

훅 기초 익히기 - 배치 처리와 순차적 처리의 차이

0

493

1

cra, next.js 관련 질문 드립니다!

0

613

1

useState 배열 비구조화 문법 질문!

0

260

1

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

1

1091

2

Saga 오류 이거 혹시 왜이런지 알수 있을까요?

0

379

2

http://localhost:3001/user/search?keyword=u 이걸로 데이터를 보는데 저는 사이트에 연결할 수 없다고 나오네요

0

681

1

match

1

499

1

버튼이 생성되지 않습니다 .

0

288

1

혹시 import 옆에 파일 사이즈 표시 어떻게 하나요?

0

263

1

saga 문제

0

250

1

에러가 발생하는데 이유가뭘까요..?

0

396

2

선생님과 똑같이 했는데 다 rendering 됩니다.

0

209

1

컴포넌트와 컨테이너의 기준

0

322

1

커스텀훅의 개념과 함수차이

1

1204

1

useEffect 실전 활용법(1) 강의에서 질문있습니다.

0

345

1

리덕스, 사가파일들의 관리

0

212

1

useImperativeHandle 질문 입니다.

0

286

1

컴파일 문의드립니다.

0

212

1

React.memo 관련 질문이 있습니다.

0

380

1

Context API vs Redux 사용 빈도

0

218

1