[26.02.03] React 재직자 교육 2 - 리액트 Hook, 레이아웃

document.객체를 쓰는 것은 되도록 안하는것이 좋다.

리액트나 뷰 컴포넌트에서 적절한 위치에서 호출이 되어야한다.

"use client"
import { useRef } from "react";
function InputRef() {
const inputRef = useRef();
const handleClick = (event) => {
event.preventDefault(true);
inputRef.current.focus();
inputRef.current.style.backgroundColor = "orange";
console.log(inputRef.current.value);
};

return (
<div className="card">
...
<input type="text" id="email" ref={inputRef} style={{width:"200px"}}
className="form-control" defaultValue={"email@example.com"}/>
...
<button type="submit" onClick={handleClick}
className="btn btn-info">입력양식 포커스 및 스타일 변경</button>
...
</div>
);
}
export default InputRef;

 

버튼이 클릭 되는 시점에는 inputRef라는 변수는 <input>엘리먼트를 참조 하고 있다.

화면이 다 나온 후 클릭하는거니까

 

인픗 엘리먼트의 참조가 current라는 속성에 대입이 된다.

 

inputRef.current.focus(); //커서 포커스 한다

inputRef.current.vlaue

 

그런데 리액트에서는 엘리먼트를 잘 참조하지않는다...

 

useRef : 엘리먼트 참조 하는 방법 

useRef 훅으로 변수를 하나 만들고 

ref={}이렇게 해주면 

인풋이 필요 할경우 사용할수있다.

 

이렇게 써도 된다...

그렇지만 가급적이면 쓰지마라

만약 id="email"인 애가 여러개 있다..?

같은 DOM에 중복 될수있음.

다른 컴포넌트에서도 이 아이디 쓸수있음

그러면 dom에서 가장 가까운 애를 가져옴...

내가 원하는 애 아닐수도있음

 

그래서 참조변수를 하나 넣어서 나중에 dom이 만들어질때 사용해야된다.

 

 

이렇게 useRef사용하자.

 

레이아웃 layout.js

반드시 {children} 있어야한다!!!

prop으로 ({children})을 받고 

{children}을 return에 넣아야된다.

 

중첩 레이아웃

애널리스틱스 랑 셋팅스는 페이지 컴포넌트이다

컴포넌트가 어디에 나올까?

레이아웃 js가 두개 있잖아....

이럴 경우에 제일 가까운 layout.js에 포함됨

 

페이지 컴포넌트 들을 가장 가까운 레이아웃에 포함이 되고 그 레이아웃은 다시 최상단 레이아웃에 포함된다.

 

layout.js는 한번만 작성하는것이 아니고 중첩해서 작성할수있다.

 

props에 children을 받아서 표현식으로 칠드런을 작성해준다.

 

 

function ....({children}){ // 표현식 아니다. 자바 스크립트 객체이다!

return(

{children}  => 표현식이다. 자바스크립트 객체 아님!!

)

}