[TIL-138] 위코드 39일차: Project 1 - CSS

flex-wrap과 grid

좌: flex-start / 우: space-between

.productContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;   // space-between
    width: 100%;
    padding: 0 160px;
}

flex-wrap을 써서 나열된 상품들이 div.productContainer의 너비를 넘게 되면 아래줄로 내려간다. 그런데 justify-content의 문제가 있다. flex-start를 하면 왼쪽으로 붙어 정렬되어 양쪽 여백이 맞지 않게 되고, space-between을 하면 상품이 덜 채워진 마지막줄이 어색해진다.

 

 

부모 선택자 &

 

---

 

Path Parameter

 

 

조건부 렌더링

function Main() {
  const [productList, setProductList] = useState([]);
  if (!productList.length) {
	  return null;
	}

  return ( <h1>{productList[0].name}</h1> )
}

https://reactjs-kr.firebaseapp.com/docs/conditional-rendering.html