네스팅(nesting)이란?

SaSS의 네스팅(nesting)이란?

: 부모 루틴 안에서 자식 루틴을 넣어서 짜는 것이라고 보면 된다.

ex) 네스팅 적용

<div>
	<p>nesting 예시</p>
</div>

div{
 	p {
    	color:red;
    }
 }

 

이런 식으로, 변화시킨다.

여기서 .Login은 react에서는 최상위 Element가 존재해야 한다.

 

Login 컴포넌트

render() {

    return (

      <div className="Login"> -> 최상의 Element의 이름은 컴포넌트의 이름과 통일시키는 것이 유지 보수할 때 좋다.

        <div className="login-form"> --> 부모

          <img src={img} alt="Logo" />

          <input

            className="userId" --> 자식

            type="text"

            placeholder="전화번호, 사용자 이름 또는 이메일"

            onChange={this.idInputCheck}

          />

          <input

            className="userPw" --> 자식

            type="password"

            placeholder="비밀번호"

            onChange={this.pwInputCheck}

          />

          <button

            className="loginBtn" --> 자식

            type="button"

            style={{ backgroundColor: this.state.btnColor }}

            onClick={this.btnClick}

          >

            로그인

          </button>

        </div>

      </div>

    );

  }

Login.scss

/* 최상위 Element */
.Login {
  box-sizing: border-box;
  background-color: rgba(var(--b3f, 250, 250, 250), 1);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

/* 부모 */
  .login-form {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
    width: 350px;
    height: 300px;
    padding: 0px 25px;
	
    /* 자식 1 */
    img {
      padding: 30px 45px 45px 45px;
      margin-bottom: 0px;
    }

	/* 자식 2 */
    .userId {
      background-color: rgba(var(--b3f, 250, 250, 250), 1);
      margin-bottom: 10px;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid #cdced0;
    }

	/* 자식 3 */
    .userPw {
      background-color: rgba(var(--b3f, 250, 250, 250), 1);
      padding: 8px;
      border-radius: 4px;
      margin-bottom: 15px;
      border: 1px solid #cdced0;
    }

	/* 자식 4 */
    .loginBtn {
      color: white;
      font-weight: bold;
      padding: 3px 0;
      border: 1px solid #b2dffc;
      border-radius: 4px;
    }
  }
}

이런식으로 네스팅을 구성하면 다른 컴포넌트에서 사용한 class이름이 겹치지 않고, 부모 자식 관계로 나타내기 때문에 소스를 수정하거나 속성들을 적용시킬 때 더욱 편하게 느껴질 것이다.

 

출처 - https://ljtaek2.tistory.com/101