Toggle機能の展開/縮小を実現

31332 ワード

内容

  • [展開]ボタンをクリックすると、サブテキスト
  • が表示されます.
  • 展開ボタンが消え、折りたたみボタンが現れ、
  • 折りたたみボタンをクリックすると、折りたたみボタンとサブテキストが消え、
  • に戻ります.

    結果



    コード#コード#

    import React, { useState } from 'react';
    import styled from 'styled-components';
    
    const Text = () => {
      const [isButtonClick, setIsButtonClick] = useState(false);
    
      const onToggleButton = e => {
        setIsButtonClick(!isButtonClick);
      };
    
      return (
        <IntroduceTextBox>
          <IntroduceText>
            <p>
              무엇을 생각하면 견딜 수 있나.
              <br />
              가슴에 활활 일어나는 불이 없다면.
              <br />
              기어이 돌아가 껴안을 네가 없다면.
              <br />
              <br />
              이곳에 살았던 이들로부터, 이곳에 살아 있는 이들로부터 <br />
              꿈처럼 스며오는 지극한 사랑의 기억 <br />
              2016년 『채식주의자』로 인터내셔널 부커상을 수상하고 2018년 『흰』으로
              같은 상 최종 후보에 오른 한강 작가의 5년 만의 신작 장편소설 <br />
              『작별하자』가 출간되었다. 2019년 겨울부터 이듬해 봄까지 계간
              『문학동네』에 전반부를 연재하면서부터 큰 관심을 모았고, 그뒤 일
              년여에 걸쳐 후반부를 <br />
            </p>
            {/* 숨기기 */}
            <ButtonOn
              className="hiddenButton"
              onClick={onToggleButton}
              buttonShow={!isButtonClick}
            >
              펼쳐보기 <i className="fas fa-chevron-circle-down" />
            </ButtonOn>
    
            {/* 나타내기 */}
            {isButtonClick && (
              <>
                <span>
                  집필하고 또 전체를 공들여 다듬는 지난한 과정을 거쳐 완성되었다.
                  본래 「눈 한 송이가 녹는 동안」(2015년 황순원문학상 수상작),
                  「작별」(2018<br />
                  김유정문학상 수상작)을 잇는 ‘눈’ 3부작의 마지막 작품으로
                  구상되었으나 그 자체 완결된 작품의 형태로 엮이게 된바, 한강 작가의
                  문학적 궤적에서 <br />
                  『작별하자』가 지니는 각별한 의미를 짚어볼 수 있다. 이로써
                  『소년이 온다』(2014), 『흰』(2016), ‘눈’ 연작(2015, 2017) 등
                  근작들을 통해 어둠
                  <br />
                  속에서도 한줄기 빛을 향해 나아가는 인간의 고투와 존엄을 그려온
                  한강 문학이 다다른 눈부신 현재를 또렷한 모습으로 확인할 수 있게
                  되었다. <br />
                  오래지 않은 비극적 역사의 기억으로부터 길어올린, 그럼에도 인간을
                  끝내 인간이게 하는 간절하고 지극한 사랑의 이야기가 눈이 시리도록
                  선연한 이미지와 <br />
                  유려하고 시적인 문장에 실려 압도적인 아름다움으로 다가온다.
                </span>
                <ButtonOff onClick={onToggleButton}>
                  접기
                  <i className="fas fa-chevron-circle-up" />
                </ButtonOff>
              </>
            )}
          </IntroduceText>
        </IntroduceTextBox>
      );
    };
    
    export default Text;
    
    const IntroduceTextBox = styled.div`
      margin: 30px 0 80px 0;
    `;
    
    const ButtonStyle = styled.button`
      float: right;
      color: #4076b5;
      border: none;
      cursor: pointer;
      background-color: white;
      font-size: 14px;
    
      i {
        margin-left: 3px;
        font-size: 16px;
      }
    `;
    
    const IntroduceText = styled.div`
      line-height: 1.8em;
      font-size: 15px;
      color: #666;
      height: ${({ isButtonClick }) => (isButtonClick ? `190px` : `100%`)};
      overflow: hidden;
    `;
    
    const ButtonOn = styled(ButtonStyle)`
      ${({ buttonShow }) => {
        return buttonShow ? `display:block` : `display: none`;
      }}
    `;
    
    const ButtonOff = styled(ButtonStyle)`
      ${({ buttonShow }) => {
        return buttonShow ? 'display: none' : 'display: block';
      }};
    `;
    

    [展開](Expand)ボタンをクリックしてサブテキストを表示(修正)

  • 水晶殿
    spanにボタンを挿入し、本文とボタンを同時に表示して消去する
  • 修正後
  • ボタンをspanから抜くことでメンテナンス
    const [isButtonClick, setIsButtonClick] = useState(false);
    
    //click event가 발생되면 event를 인자로 받아서 
    //set으로 isButtonClick:false <-> true로 바꿔줌
      const onToggleButton = e => {
        setIsButtonClick(!isButtonClick);
      };
    //수정전
    	  <HiddenButton
                className="hiddenButton"
                onClick={onToggleButton}
                펼쳐보기 <i className="fas fa-chevron-circle-down" />
              </HiddenButton>
    //수정후
    	<ButtonOn
              className="hiddenButton"
              onClick={onToggleButton}
              buttonShow={!isButtonClick}
            >
              펼쳐보기 <i className="fas fa-chevron-circle-down" />
            </ButtonOn>
    
    //조건부렌더링을 사용하여 isButtonClick가 true이면 본문텍스트를 나타낸다
    //수정전
    //span안에 버튼을 넣어서 본문과 버튼이 같이 나타나고 사라짐
    	{isButtonClick && (
              <span>
                ----본문 텍스트 생략----
                <HiddenButton onClick={onToggleButton}>
                  접기
                  <i className="fas fa-chevron-circle-up" />
                </HiddenButton>
              </span>
            )}
    //수정후
    // span안에 있던 버튼을 밖으로 빼기 
             {isButtonClick && (
              <span>
                ----본문 텍스트 생략----
                <HiddenButton onClick={onToggleButton}>
                  접기
                  <i className="fas fa-chevron-circle-up" />
                </HiddenButton>
                </span>
                <ButtonOff onClick={onToggleButton}>
                  접기
                  <i className="fas fa-chevron-circle-up" />
                </ButtonOff>
              </>
            )}

    展開ボタンが消え、折りたたみボタンが表示されます(修正)

  • 水晶殿
    ボタンモデリング
  • 修正後
    ボタンをオン/オフにしてheightを条件スタイルにスケール
    trueなら190 pxに増やして、本稿の内容を見せてください.
  • false綿100%に減少
    const [isButtonClick, setIsButtonClick] = useState(false);
    
      const onToggleButton = e => {
        setIsButtonClick(!isButtonClick);
      };
    
    	   <HiddenButton
                className="hiddenButton"
                onClick={onToggleButton}
    //onClick후 isButtonClick이 true가 되면 buttonShow의 스타일링이 변경됨
                buttonShow={isButtonClick}
              >
                펼쳐보기 <i className="fas fa-chevron-circle-down" />
              </HiddenButton>
    //style-component
    //button 스타일을 따로 빼서 스타일링 하기
    const ButtonStyle = styled.button`
      float: right;
      color: #4076b5;
      border: none;
      cursor: pointer;
      background-color: white;
      font-size: 14px;
    
      i {
        margin-left: 3px;
        font-size: 16px;
      }
    `;
    //수정후. 추가코드
    const IntroduceText = styled.div`
      line-height: 1.8em;
      font-size: 15px;
      color: #666;
    
    //true면 190px로 늘려주줘서 본문내용이 보이게,
    //false면 100%로 화면에 맞게 줄어듦
    
      height: ${({ isButtonClick }) => (isButtonClick ? `190px` : `100%`)};
      overflow: hidden;
    `;
    
    //따로 뺀 버튼 스타일링을 확장스타일링을 이용하여 자식으로 사용
    //수정전
    const HiddenButton = styled(ButtonStyle)`
      ${({ buttonShow }) => {
        //buttonShow가 true이면 none false일때 block
        return buttonShow ? `display: none` : `display:block`;
      }};
    `;
    
    //수정후
    const ButtonOn = styled(ButtonStyle)`
      ${({ buttonShow }) => {
        return buttonShow ? `display:block` : `display: none`;
      }}
    `;
    
    const ButtonOff = styled(ButtonStyle)`
      ${({ buttonShow }) => {
        return buttonShow ? 'display: none' : 'display: block';
      }};
    `;