[React] 컴포넌트 가운데정렬

이제 텍스트 입력칸을 만들고, 이를 가운데 정렬하려고 한다.
사실 처음에 가운데정렬을 할 때 굉장히 애를 먹었다.
처음 react 컴포넌트 가운데 정렬을 검색했을 때 나오는 방법은
width속성을 지정하고,

margin : 0 auto;

이었다.

margin : '0 auto';

이렇게 ' ' 안에 씌워주면 작동이 잘 되지 않으니 주의하자.

아무튼 처음에 이렇게 했을 때 잘 되지 않아서 겨우겨우 방법을 찾은 것이

width : 100%
text-align : center;
margin : 0 auto;

이렇게 두고 그냥 강제 margin-left와 margin-right를 주는 것이었다.
사실 생각해보면 별것도 아닌 방법을 몇시간을 끌었다.

text-align은 텍스트박스 안의 가운데 정렬을 해주는 것이었고,
사실상 심지어 마지막의 'margin:0 auto' 는 필요도 없는 조건이었다.

그런데 나중에 다시 해보니

display : block;

이 속성을 추가하니 margin:0 auto 가 잘 작동 하는 것이었다.
즉, 다른 블로그에서 봤던 대로 가운데 정렬이 잘 되었다.

display 속성은
웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다.
라고 하며,

display : block 속성은
전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
라고 한다. 즉, 이거를 해주면 이 칸은 해당 컴포넌트 밖에 안 들어가니까 margin:0 auto 속성이 잘 작동하는 것이다.

---

(TextInput.js)

import styled, { css } from "styled-components";


function TextInput(props){
    return <StyledInput     
    padding={props.padding} 
    width={props.width}
    height={props.height}
    background={props.background} 
    margin={props.margin}
    marginTop={props.marginTop}
    marginLeft={props.marginLeft}
    marginRight={props.marginRight}
    marginBottom={props.marginBottom}
    textSize={props.textSize}
    textColor={props.textColor}
    fontWeight={props.fontWeight}
    border={props.border}
    radius={props.radius}

    >{props.title}</StyledInput>
}

const StyledInput = styled.textarea`
  padding: ${props => props.padding};
  width: ${props => props.width};
  height: ${props => props.height};
  background : ${props => props.background};
  //margin : ${props => props.margin};
  margin : 0 auto;
  display : block;
  margin-top : ${props => props.marginTop};
  margin-left : ${props => props.marginLeft};
  margin-right : ${props => props.marginRight};
  margin-bottom : ${props => props.marginBottom};
  font-size: ${props => props.textSize};
  color : ${props => props.textColor};
  font-weight: ${props => props.fontWeight};
  border: ${props => props.border};
  border-radius: ${props => props.radius};

  font-family: "Noto Sans KR", sans-serif;
  
  
`;


export default TextInput;

(App.js)

import logo from './logo.svg';
import './App.css';
import Button from './Button.js'
import TextInput from './TextInput';

function App() {
  return (
    <div className="App">
      Hello React!
      <div></div>

      <TextInput title='여기에 입력하세요' width='300px' ></TextInput>

      <Button title='선택 완료' padding='20px' width='100%' background='#FFFFFF' marginTop = '40px' 
      textSize='30px' textColor = '#000000' fontWeight = 'bold' 
      border = '1px solid #5F5F5F' radius = '13px'  
       ></Button>
    </div>
  );
}

export default App;

(결과화면)

---

(참고)
https://www.daleseo.com/css-display-inline-block/

---