5월9일 React day03 의 test4-7

day03 Test01 

사용되는 Hook - useRef 

 

/*

Hooks - useRef

- JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에

  getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.

  리액트에서는 직접 DOM 요소에 접근해야 할 때, useRef 훅을 사용하여 DOM 요소에 직접 접근이 가능하다.

- useRef 훅이 반환하는 ref 객체를 이용해서 자식 요소에 접근이 가능하다.

리액트 컴포넌트는 State가 변할 때마다 다시 렌더링이 되면서 컴포넌트 내부 변수들이 초기화 된다.

하지만 Ref안에 있는 값은 아무리 변경해도 컴포넌트는 다시 렌더링 되지 않는다. *** 값이 고정되어 있어서 유지할 수 있다는 뜻이다.

즉, State 대신 Ref를 사용한다면 불필요한 렌더링을 막을 수 있다.

또한 컴포넌트가 아무리 렌더링이 되어도 Ref안에 저장되어 있는 값은 변화되지 않고 그대로 유지 된다.

그래서 렌더링을 발생시키지 말아야 하는 값을 다룰 때 정말 편리하다.

1. Ref 객체를 만들어준다.

const nameRef = useRef();

2. 선택하고 싶은 DOM에 속성으로 ref 값을 설정해준다.

<input  ref = { nameRef } />

3. Ref 객체의 current 값은 우리가 선택하고자 하는 DOM을 가리킨다.

  그리고 포커싱을 해주는 DOM API focus()를 호출한다.

 

*/

 

 

 

day03 의 test4-7까지 

 

 

 

(test 4 , Animal, Display 묶음 파일 ) 내가 좋아하는 동물은 어쩌고~

 

(test5, Name, Fruit, Output 묶음 파일) 이름과 과일을 적고 그 결과 값이 나오는거 

 

(test6) 이름 아이디 비번 입력하고 reset버튼을 눌렀을 때 초기화 되면  입력된 데이터가 사라지고 이름쪽에 커서 focus가 갈 수 있도록 함.

 

(test7, test07main, test07Input, test07Output, test07Print)  이름 나이 주소 핸드폰 입력을 하고 그 다음페이지에서 그 입력된 값들을 다 볼 수 있고 마지막 페이지에서 설문조사 참여해주셔서 감사합니다. 이렇게 뜨는 거