toggle

클릭할 때마다 컴포넌트를 toggle 하는 방법을 공부해보자.

아래는 간단한 예시이다.

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      active: true,  
    }
  }
  
  handleClick = () => {
    this.setState({
      active: !this.state.active,
    })
  }
  
  render() {
    return(
      <div>
        {this.state.active && <Child />}
        <button onClick={this.handleClick}>Toggle!!</button>
      </div>
    );
  }
}

Toggle!! 버튼을 클릭할 때마다 active 라는 state 의 key 값을 계속 not 연산자로 바꾸어 setState() 하고 있다. 화면에 렌더링 될 때는 {this.state.active && <Child />} 이 부분을 만나 active 값이 true 일 때에만 <Child /> 가 렌더링 되었다가 그렇지 않게하는 기능을 구현할 수 있다.

삼항연산자를 이용하여 toggle 기능을 구현하는 다른 방법도 있다.

아래 예시는 버튼을 클릭할 때마다 input type 을 password 와 text 를 오가며 사용자가 입력한 패스워드 값을 확인할 수 있게 하는 기능이다.

class Toggle extends Component {
  constructor() {
    super();
    this.state = {
      inputType: "password",
    }
  }
  
  handlePassword = () => {
    this.setState({
      inputType: this.state.inputType === "password" ? "text" : "password",
    })
  }
  
  render() {
    return (
      <div>
        <input type={this.state.inputType} />
        <button onClick={this.handlePassword}>Change</button>
      </div>
    );
  }
}

inputType: this.state.inputType === "password" ? "text" : "password"이 부분을 잘 보면, this.state.inputType 이 "password" 라면(if)? inputType 의 값은 "text" 가 되고 그렇지 않다면(else) : 다시 "password" 로 되돌리겠다는 의미이다.

이렇게 조건이 있는 inputType 의 값을 render() 안에서 input type 의 값으로 주었다. 이렇게 하면 버튼을 클릭할 때마다 input 의 type 을 "password" 와 "text" 로 바뀌게 할 수 있다.

scroll event

클론 프로젝트를 진행하면서 스크롤 이벤트를 공부할 수 있게 되었다.

서로 다른 nav 태그 두개를 중첩시켜 두고, 하나는 보이지 않게 해두다가 사용자가 특정 지점 이상으로 스크롤을 내리게 되면 보이지 않던 숨어있던 nav 를 보이게 하여 스크롤 지점에 따라 다른 nav 를 보이게 하는 상황이 있었다.

class Page extends Component {
  constructor() {
    super();
    this.state = {
      secondNavDisplay: false,
    }
  }
  
  componentDidMount() {
    document.addEventListener("scroll", () => {
      if(window.scrollY >= 770){
        this.setState({ secondNavDisplay: true });
      } else {
        this.setState({ secondNavDisplay: false })
      }
    })
  }
  
  render() {
    return(
      <div>
        <NavOne />
        {this.state.secondNavDisplay && <NavTwo />}
        <First />
        <Second />
        <Third />
      </div>
    );
  }
}

window.scrollY 를 제외하고는 다른 예제에서 이미 설명한 부분이다. 이 예제 역시 window.scrollY 가 770 을 넘느냐 그렇지 않느냐에 따라 <NavTwo /> 를 화면에 보이게 했다가 그렇지 않게 하는 기능을 수행한다.

window.scrollY 는 window 에서 문서가 수직으로 얼마나 스크롤 되었는 지를 px 단위로 반환한다. 수평으로 얼마나 스크롤 되었는지를 확인하려면 window.scrollX 를 사용하면 된다.

문서의 지정된 위치로 스크롤 하려면 window.scrollTo(X, Y) 를 사용하면 된다. 매개변수는 두가지인데, X 는 x좌표이며 Y 는 y 좌표이다.

React pass funtion to child component

자식 컴포넌트로 어떠한 값을 넘기려면 props 를 사용하면 된다. 그렇다면 함수를 넘기려면 어떻게 해야할까?

class Parent extends Component {
  passedFunction = () => {
    // 함수 실행 내용
  }
  
  render() {
    return <Child passedFuntion={this.passedFuntion} />
  }
}

class Child extends Component {
  render() {
    <div onClick={this.props.passedFunction}
  }
}

이런 상황에서는 자식 컴포넌트에서 onClick 이벤트를 선언해 주고, 클릭 이벤트가 발생하면 부모 컴포넌트의 속성값을 pros 로 받아온다. 해당 props 안에는 어떠한 함수의 실행이 담겨져있다.

---

react 에서 변하는 값은 state 에 저장하는 것이 좋고, 그렇지 않고 변하지 않는 값은 const 로 관리하는 것이 좋다.