• 리팩토링 할거 백로그에 다 올리기

오즈

// ExplorePick
function ExplorePick({ setIsActive }) {
  const router = useRouter();
  const [select, setSelect] = useState({
    item: null,
    kind: null,
    hashtags: null,
    quantity: null,
  });
  const onClickSearchButton = () => {
    router.push({
      pathname: '/explore/result',
      query: { ...select },
    });
  };
  const onClickXButton = () => {
    setIsActive(false);
  };

  return (
    <Wrapper>
      <div>
        <Icon icon={'XButton'} size={20} onClick={onClickXButton}></Icon>
      </div>
      <h2>PICK 하세요!</h2>
      <div>
        <Filter select={select} setSelect={setSelect}></Filter>
      </div>
      <div>
        <Button
          variant="primary"
          fontWeight="400"
          borderRadius="10px"
          width="186px"
          height="38px"
          fontSize={'12px'}
          onClick={onClickSearchButton}
        >
          검색
        </Button>
      </div>
    </Wrapper>
  );
}

select 상태를 Filter로 빼려고 했는데, Button에서 사용해야하므로 ExplorePick에서 관리하도록 한다.

tip

자식에서 부모로 상태를 전달해주는 방법은 없을까 ?

// Parent

import { Component } from 'react';

class App extends Component {

    onSearchSubmit(text) {
      // 전달된다.
    	console.log(text);
    }

    render (
    	<div>
       		<Searchbar onSubmit={this.onSearchSubmit}/>
        </div>
    );

}

// Children
import { Component } from 'react';

class Searchbar extends Component {

    state = { text: '' };

    onFormSubmit = e => {
    	e.preventDefault();
      // 인자로 받은 onSubmit 함수에 인자로 상태값을 넣어준다.
        this.props.onSubmit(this.state.text);
    }

    render (
    	<div>
            <form onSubmit={this.onFormSubmit}>
       			<input 
            		value={this.state.text}
            		onChange={(e) => {this.setState({ text: e.tartget.value})}}/>
            </form>
        </div>
    );

}

css 이슈

살짝 벌어지는 이슈

css를 위와 같이 주었을때 드랍다운이 켜지게되면 드랍다운이 마지막 자식이 되어버림.
css가 getClientBoundingRect() 계산 이후에 바뀌게 되버려 계산한 값과 차이를 가져 벌어지게됨

같은 열 크기를 만들어보자

grid

행수가 정해지지 않은 경우

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
}

행수가 정해져있는 경우

grid-template-columns: repeat(3, minmax(0, 1fr));

• grid auto columns란
  2 x 2 그리드라고 가정할때 column(5,6)에 넣게되어버리면 사실상 없는 위치에 들어가는 것이다. 다음 사진과 같다.
  
  이 때 column width가 0인 암시적 열들이 생겨나는데 이 사이즈를 조절하는 속성이 grid-auto-columns이다.

flex

아래 ref를 보며 flex-grid를 정리해야겠다.

Ref

• grid
• grid 대박
• flex naver