리액트 CSS - Input 태그 감추기 (How to Hide Input Tag)

리액트 전체 링크

 

참고

- useRef로 특정 위치로 포커스 이동하기 (Use Ref Hook Focus)

 

style={{ display: "block", height: 0, width: 0, border: 0, padding: 0 }}

vs type="hidden" 비교

 

아래의 코드를 실행해보자.

function App() {
  return (
    <div className="App">
      <input />
      <div>hello</div>
    </div>
  );
}

export default App;

 

input 아래에 hello가 만들어진다.

 

input 태그를 숨기기 위해 height와 width를 0으로 만들어보자.

function App() {
  return (
    <div className="App">
      <input
        style={{
          height: 0,
          width: 0,
        }}
      />
      <div>hello</div>
    </div>
  );
}

export default App;

 

높이와 너비가 0이라도 아래와 같이 조그만 사각형이 보이게 된다.

 

이번에는 border와 padding을 0으로 수정하자.

function App() {
  return (
    <div className="App">
      <input
        style={{
          height: 0,
          width: 0,
          border: 0,
          padding: 0,
        }}
      />
      <div>hello</div>
    </div>
  );
}

export default App;

 

input 태그가 사라졌지만 hello 위에 빈 공간이 남는다.

 

display를 block으로 설정하면 input이 안보이게 된다.

function App() {
  return (
    <div className="App">
      <input
        style={{
          display: "block",
          height: 0,
          width: 0,
          border: 0,
          padding: 0,
        }}
      />
      <div>hello</div>
    </div>
  );
}

export default App;

 

더 간단한 방법은 hidden을 type을 hidden으로 설정하는 것이다.

function App() {
  return (
    <div className="App">
      <input type="hidden" />
      <div>hello</div>
    </div>
  );
}

export default App;

 

하지만 hidden으로 처리된 input은 useRef의 focus 기능을 이용할 수 없다.

import { useRef } from 'react';

function App() {
  const focusTest = useRef(null);

  return (
    <div className="App">
      <button onClick={() => focusTest.current.focus()}>focus test</button>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      
      {/* <input type="hidden" ref={focusTest}/> */}
      <input style={{
          display: "block",
          height: 0,
          width: 0,
          border: 0,
          padding: 0,
        }} ref={focusTest}/>
      
      <div>hello</div>

    </div>
  );
}

export default App;

 

위의 코드에서 두 개의 input 태그의 주석을 바꿔가면서 테스트해보자.

hidden인 경우는 focus가 되지 않지만, { display: "block", ... } 으로 설정한 경우는 focus가 이동한다.

function App() {
  const focusTest = useRef(null);

  return (
    <div className="App">
      <button onClick={() => focusTest.current.focus()}>focus test</button>
      <div>hello</div>
	  ...
      <div>hello</div>
      
      {/* <input type="hidden" ref={focusTest}/> */}
      <input style={{
          display: "block",
          height: 0,
          width: 0,
          border: 0,
          padding: 0,
        }} ref={focusTest}/>
      
      <div>hello</div>

    </div>
  );
}

export default App;