2021.03.27

웹_프론트_백엔드/프론트엔드

2021.03.27

shine94 2021. 5. 14. 10:18

1. useRef의 기능

① DOM에 직접 접근하는 방법
② 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리

2. useRef로 컴포넌트 안의 변수 만들기
└ 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리
└ setTimeout, setInterval을 통해서 만들어진 id
└ 외부 라이브러리를 사용하여 생성된 인스턴스
└ scoll 위치

1) 배열의 항목 추가

** /component/userlist2.jsx

import React from 'react';

function User({user}) {
    return (
        <div>
            <b>{user.username}</b> <span>({user.email})</span>
        </div>
    )
}

function UserList({users}) {
    return (
        <div>
            {users.map(user => (
                <User user={user} key={user.id}/>
            ))}
        </div>
    )
}

export default UserList;

** /component/createUser.jsx

import React from 'react';

function CreateUser({username, email, onChange, onCreate}) {
    return (
        <div>
            <input name="username" placeholder="이름을 입력하세요" onChange={onChange} value={username}/>
            <input name="email" placeholder="이메일을 입력하세요" onChange={onChange} value={email}/>
            <button onClick={onCreate}>등록</button>
        </div>
    )
}

export default CreateUser;

** app.jsx

import React, {useRef, useState} from 'react';
// import Counter from './component/counter';
// import Input from './component/input';
// import MultiInput from './component/multiinput';
// import UserList from './component/userlist'
import UserList from './component/userlist2';
import CreateUser from './component/createUser';

function App() {

  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });

  const {username, email} = inputs;

  const onChange = e => {
    const {name, value} = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  }

  const [users, setUsers] = useState([
    {
        id: 1,
        username: '김사과',
        email: 'apple@apple.com'
    },
    {
        id: 2,
        username: '오랜지',
        email: 'orange@orange.com'
    },
    {
        id: 3,
        username: '반하나',
        email: 'banana@banana.com'
    },
    {
        id: 4,
        username: '이메론',
        email: 'melon@melon.com'
    },
    {
        id: 5,
        username: '배애리',
        email: 'berry@berry.com'
    }
  ]);

  const nextId = useRef(6);

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    }

    // 배열에 새 항목을 추가할 때는 spread 연산자 또는 concat 함수를 사용
    // 1. spread 연산자
    // setUsers([...users, user]);

    // 2. concat 함수
    setUsers(users.concat(user));
    // --------------------------------------------------------------
    
    setInputs({
      username: '',
      email: ''
    });

    nextId.current += 1;
  }; 

  // return (
  //   <div>
  //     {/* <Counter/> */}
  //     {/* <Input/> */}
  //     {/* <MultiInput/> */}
  //     {/* <UserList/> */}
  //   </div>
  // );
  return (
    <>
    <CreateUser
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
    />
    <UserList users={users}/>
    </>
  );
}

export default App;

2) 배열의 항목 제거

** /component/userlist2.jsx

import React from 'react';

function User({user, onRemove}) {
    return (
        <div>
            <b>{user.username}</b> <span>({user.email})</span>
            <button onClick={() => onRemove(user.id)}>삭제</button>
        </div>
    );
}

function UserList({users, onRemove}) {
    return (
        <div>
            {users.map(user => (
                <User user={user} key={user.id} onRemove={onRemove}/>
            ))}
        </div>
    )
}

export default UserList;

** app.jsx

import React, {useRef, useState} from 'react';
// import Counter from './component/counter';
// import Input from './component/input';
// import MultiInput from './component/multiinput';
// import UserList from './component/userlist'
import UserList from './component/userlist2';
import CreateUser from './component/createUser';

function App() {

  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });

  const {username, email} = inputs;

  const onChange = e => {
    const {name, value} = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  }

  const [users, setUsers] = useState([
    {
        id: 1,
        username: '김사과',
        email: 'apple@apple.com'
    },
    {
        id: 2,
        username: '오랜지',
        email: 'orange@orange.com'
    },
    {
        id: 3,
        username: '반하나',
        email: 'banana@banana.com'
    },
    {
        id: 4,
        username: '이메론',
        email: 'melon@melon.com'
    },
    {
        id: 5,
        username: '배애리',
        email: 'berry@berry.com'
    }
  ]);

  const nextId = useRef(6);

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    }

    // 배열에 새 항목을 추가할 때는 spread 연산자 또는 concat 함수를 사용
    // 1. spread 연산자
    // setUsers([...users, user]);

    // 2. concat 함수
    setUsers(users.concat(user));
    // --------------------------------------------------------------

    setInputs({
      username: '',
      email: ''
    });

    nextId.current += 1;
  }; 

  const onRemove = id => {
    // user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듦
    // user.id가 id인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  }

  // return (
  //   <div>
  //     {/* <Counter/> */}
  //     {/* <Input/> */}
  //     {/* <MultiInput/> */}
  //     {/* <UserList/> */}
  //   </div>
  // );
  return (
    <>
    <CreateUser
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
    />
    <UserList users={users} onRemove={onRemove}/>
    </>
  );
}

export default App;

3) 항목을 클릭하면 글자색 토글되도록 설정

** userlist2.jsx

import React from 'react';

function User({user, onRemove, onToggle}) {
    return (
        <div>
            <b
                style={{
                    cursor: 'pointer',
                    color: user.active ? 'deeppink' : 'black'
                }}
                onClick={() => onToggle(user.id)}
            >{user.username}</b> <span>({user.email})</span>&nbsp;&nbsp;
            <button onClick={() => onRemove(user.id)}>삭제</button>
        </div>
    );
}

function UserList({users, onRemove, onToggle}) {
    return (
        <div>
            {users.map(user => (
                <User user={user} key={user.id} onRemove={onRemove} onToggle={onToggle}/>
            ))}
        </div>
    )
}

export default UserList;

** app.jsx

import React, {useRef, useState} from 'react';
// import Counter from './component/counter';
// import Input from './component/input';
// import MultiInput from './component/multiinput';
// import UserList from './component/userlist'
import UserList from './component/userlist2';
import CreateUser from './component/createUser';

function App() {

  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });

  const {username, email} = inputs;

  const onChange = e => {
    const {name, value} = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  }

  const [users, setUsers] = useState([
    {
        id: 1,
        username: '김사과',
        email: 'apple@apple.com',
        active: true
    },
    {
        id: 2,
        username: '오랜지',
        email: 'orange@orange.com',
        active: false
    },
    {
        id: 3,
        username: '반하나',
        email: 'banana@banana.com',
        active: false
    },
    {
        id: 4,
        username: '이메론',
        email: 'melon@melon.com',
        active: false
    },
    {
        id: 5,
        username: '배애리',
        email: 'berry@berry.com',
        active: false
    }
  ]);

  const nextId = useRef(6);

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    }

    // 배열에 새 항목을 추가할 때는 spread 연산자 또는 concat 함수를 사용
    // 1. spread 연산자
    // setUsers([...users, user]);

    // 2. concat 함수
    setUsers(users.concat(user));
    // --------------------------------------------------------------

    setInputs({
      username: '',
      email: ''
    });

    nextId.current += 1;
  }; 

  const onRemove = id => {
    // user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듦
    // user.id가 id인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  }

  const onToggle = id => {
    setUsers(
      users.map(user => user.id === id ? {...user, active: !user.active} : user)
    );
  }

  // return (
  //   <div>
  //     {/* <Counter/> */}
  //     {/* <Input/> */}
  //     {/* <MultiInput/> */}
  //     {/* <UserList/> */}
  //   </div>
  // );
  return (
    <>
    <CreateUser
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
    />
    <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
    </>
  );
}

export default App;

3. useEffect

: 컴포넌트가 마운트(처음 나타났을 때) 됬을 때,
언마운트(사라질 때) 됬을 때,
그리고 업데이트(특정 props가 바뀔 때) 될 때 특정 작업을 처리할 수 있다.

** 컴포넌트가 마운트시 하는 작업

① props로 받은 값을 컴포넌트의 로컬 상태로 설정
② 외부 API 요청(REST API 등 ...)
③ 라이브러리 사용
④ setInterval을 통한 반복작업 또는 setTimeout을 통한 작업 예약

** 컴포넌트가 언마운트시 하는 작업

① 라이브러리 인스턴스 제거
② setInterval, setTimeout을 사용하여 등록한 작업을 clear 할 때

1) useEffect(함수, 배열)

└ [함수] 처음 컴포넌트가 나타날 때 실행할 함수

└ [배열] 의존값이 들어있는 배열,
만약 배열을 비우게 된다면 컴포넌트가 처음 나타낼 때만 useEffect에 등록된 함수가 호출됨

2) cleanup 함수

: useEffect에서는 함수를 반환할 수 있다.
useEffect에 대한 뒷정리를 한다.
deps가 비어있는 경우에 컴포넌트가 사라질 때, cleanup 함수가 호출된다.

** /component/userlist2.jsx

import React, {useEffect} from 'react';

function User({user, onRemove, onToggle}) {
    
    useEffect(() => {
        console.log('컴포넌트가 화면에 나타남!');
        return () => {
            console.log('컴포넌트가 화면에서 사라짐');
        }
    }, [])

    return (
        <div>
            <b
                style={{
                    cursor: 'pointer',
                    color: user.active ? 'deeppink' : 'black'
                }}
                onClick={() => onToggle(user.id)}
            >{user.username}</b> <span>({user.email})</span>&nbsp;&nbsp;
            <button onClick={() => onRemove(user.id)}>삭제</button>
        </div>
    );
}

function UserList({users, onRemove, onToggle}) {
    return (
        <div>
            {users.map(user => (
                <User user={user} key={user.id} onRemove={onRemove} onToggle={onToggle}/>
            ))}
        </div>
    )
}

export default UserList;

** /component/userlist2.jsx

import React, {useEffect} from 'react';

function User({user, onRemove, onToggle}) {
    
    useEffect(() => {
        // console.log('컴포넌트가 화면에 나타남!');
        console.log(user);
        console.log('user 값이 설정되었음!');
        return () => {
            // console.log('컴포넌트가 화면에서 사라짐');
            console.log(user);
            console.log('user가 바뀌기 전...');
        }
    }, [user])

    return (
        <div>
            <b
                style={{
                    cursor: 'pointer',
                    color: user.active ? 'deeppink' : 'black'
                }}
                onClick={() => onToggle(user.id)}
            >{user.username}</b> <span>({user.email})</span>&nbsp;&nbsp;
            <button onClick={() => onRemove(user.id)}>삭제</button>
        </div>
    );
}

function UserList({users, onRemove, onToggle}) {
    return (
        <div>
            {users.map(user => (
                <User user={user} key={user.id} onRemove={onRemove} onToggle={onToggle}/>
            ))}
        </div>
    )
}

export default UserList;

** /component/userlist2.jsx

└ deps 파라미터 생략 : 컴포넌트가 리렌더링될 때마다 무조건 호출

import React, {useEffect} from 'react';

function User({user, onRemove, onToggle}) {
    
    // useEffect(() => {
    //     // console.log('컴포넌트가 화면에 나타남!');
    //     console.log(user);
    //     console.log('user 값이 설정되었음!');
    //     return () => {
    //         // console.log('컴포넌트가 화면에서 사라짐');
    //         console.log(user);
    //         console.log('user가 바뀌기 전...');
    //     }
    // }, [user])

    // deps 파라미터 생략 : 컴포넌트가 리랜더링될 때마다 무조건 호출
    useEffect(() => {
        console.log(user);
    });


    return (
        <div>
            <b
                style={{
                    cursor: 'pointer',
                    color: user.active ? 'deeppink' : 'black'
                }}
                onClick={() => onToggle(user.id)}
            >{user.username}</b> <span>({user.email})</span>&nbsp;&nbsp;
            <button onClick={() => onRemove(user.id)}>삭제</button>
        </div>
    );
}

function UserList({users, onRemove, onToggle}) {
    return (
        <div>
            {users.map(user => (
                <User user={user} key={user.id} onRemove={onRemove} onToggle={onToggle}/>
            ))}
        </div>
    )
}

export default UserList;

4. useMemo
: 성능 최적화를 위해 연산된 값을 재사용한다.

** app.jsx

import React, {useRef, useState, useMemo} from 'react';
// import Counter from './component/counter';
// import Input from './component/input';
// import MultiInput from './component/multiinput';
// import UserList from './component/userlist'
import UserList from './component/userlist2';
import CreateUser from './component/createUser';

function countActiveUser(users) {
  console.log('선택된 사용자 수를 세는 중 ... ');
  return users.filter(user => user.active).length;
}

function App() {

  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });

  const {username, email} = inputs;

  const onChange = e => {
    const {name, value} = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  }

  const [users, setUsers] = useState([
    {
        id: 1,
        username: '김사과',
        email: 'apple@apple.com',
        active: true
    },
    {
        id: 2,
        username: '오랜지',
        email: 'orange@orange.com',
        active: false
    },
    {
        id: 3,
        username: '반하나',
        email: 'banana@banana.com',
        active: false
    },
    {
        id: 4,
        username: '이메론',
        email: 'melon@melon.com',
        active: false
    },
    {
        id: 5,
        username: '배애리',
        email: 'berry@berry.com',
        active: false
    }
  ]);

  const nextId = useRef(6);

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    }

    // 배열에 새 항목을 추가할 때는 spread 연산자 또는 concat 함수를 사용
    // 1. spread 연산자
    // setUsers([...users, user]);

    // 2. concat 함수
    setUsers(users.concat(user));
    // --------------------------------------------------------------

    setInputs({
      username: '',
      email: ''
    });

    nextId.current += 1;
  }; 

  const onRemove = id => {
    // user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듦
    // user.id가 id인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  }

  const onToggle = id => {
    setUsers(
      users.map(user => user.id === id ? {...user, active: !user.active} : user)
    );
  }

  // return (
  //   <div>
  //     {/* <Counter/> */}
  //     {/* <Input/> */}
  //     {/* <MultiInput/> */}
  //     {/* <UserList/> */}
  //   </div>
  // );

  const count = useMemo(() => countActiveUser(users), [users]);

  return (
    <>
    <CreateUser
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
    />
    <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
    <div>선택된 사용자 수 : {count}</div>
    </>
  );
}

export default App;

5. Sass, Scss
1) Sass

: CSS pre-processor로서 복잡한 작업을 쉽게 할 수 있게 해주고,
코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독성을 높여주어 유지보수를 쉽게 해준다.

"yarn add node-sass"

** /component/button.jsx

import React from 'react';
import './button.scss';

/*
    HTML에서 CSS class 적용
    <div class="button size">2가지 class 적용</div>
*/
function Button({children, size}) {
    return <button className={["Button", size].join(' ')}>{children}</button>;
}

Button.defaultProps = {
    size: 'medium'
}

export default Button;

** /component/button.scss

$blue: #228be6;

.Button {
    display: inline-flex;
    color: white;
    font-weight: bold;
    outline: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;

    // height: 2.3rem;
    // padding-top: 0.5rem;
    // padding-left: 1rem;
    // padding-right: 1rem;
    // font-size: 1rem;

    &.large {
        height: 3rem;
        padding-top: 0.6rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1.25rem;
    }

    &.medium {
        height: 2.25rem;
        padding-top: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1rem;
    }

    &.small {
        height: 1.7rem;
        padding-top: 0.3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 0.85rem;
    }

    background-color: $blue;                    // $blue 변수값을 저장
    &:hover {
        background-color: lighten($blue, 10%);  // 색상을 10% 밝게
    }
    &:active {
        background-color: darken($blue, 10%);   // 색상을 10% 어둡게
    }

    & + &  {
        margin-left: 1rem;
    }
}

** app.scss

.App {
  width: 500px;
  margin: 0 auto;
  margin-top: 4rem;
  border: 1px solid gold;
  padding: 1rem;
}

** app.jsx

import React from 'react';
import './app.scss';
import Button from './component/button'

function App() {
  return (
    <div className="App">
      <div>
        <Button size="large">버튼 1</Button>
        <Button>버튼 2</Button>
        <Button size="small">버튼 3</Button>
      </div>
    </div>
  );
}

export default App;

** index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

** 색상 관련

https://yeun.github.io/open-color

** /component/button.jsx

import React from 'react';
import './button.scss';

/*
    HTML에서 CSS class 적용
    <div class="button size">2가지 class 적용</div>
*/
function Button({children, size, color}) {
    return <button className={["Button", size, color].join(' ')}>{children}</button>;
}

Button.defaultProps = {
    size: 'medium',
    color: 'blue'
}

export default Button;

** /component/button.scss

$blue: #228be6;
$gray: #495057;
$pink: #f06595;

@mixin button-color($color) {
    background-color: $color;
    &:hover {
        background-color: lighten($color, 10%);
    }
    &:active {
        background-color: darken($color, 10%);
    }
}

.Button {
    display: inline-flex;
    color: white;
    font-weight: bold;
    outline: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;

    // 1. 첫번째 size 실습
    // height: 2.3rem;
    // padding-top: 0.5rem;
    // padding-left: 1rem;
    // padding-right: 1rem;
    // font-size: 1rem;

    // 2. 두번째 size 실습
    &.large {
        height: 3rem;
        padding-top: 0.6rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1.25rem;
    }

    &.medium {
        height: 2.25rem;
        padding-top: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1rem;
    }

    &.small {
        height: 1.7rem;
        padding-top: 0.3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 0.85rem;
    }

    // 1. 첫번째 color 실습
    // background-color: $blue;                    // $blue 변수값을 저장
    // &:hover {
    //     background-color: lighten($blue, 10%);  // 색상을 10% 밝게
    // }
    // &:active {
    //     background-color: darken($blue, 10%);   // 색상을 10% 어둡게
    // }

    // 2. 두번째 color 실습
    // &.blue {
    //     background-color: $blue;
    //     &:hover {
    //         background-color: lighten($blue, 10%);
    //     }
    //     &:active {
    //         background-color: darken($blue, 10%);
    //     }
    // }
    // &.gray {
    //     background-color: $gray;
    //     &:hover {
    //         background-color: lighten($gray, 10%);
    //     }
    //     &:active {
    //         background-color: darken($gray, 10%);
    //     }
    // }
    // &.pink {
    //     background-color: $pink;
    //     &:hover {
    //         background-color: lighten($pink, 10%);
    //     }
    //     &:active {
    //         background-color: darken($pink, 10%);
    //     }
    // }

    // 3. 세번째 color 실습
    &.blue {
        @include button-color($blue);
    }
    &.gray {
        @include button-color($gray);
    }
    &.pink {
        @include button-color($pink);
    }

    & + &  {
        margin-left: 1rem;
    }
}

** app.jsx

import React from 'react';
import './app.scss';
import Button from './component/button'

function App() {
  return (
    <div className="App">
      <div className="height">
        <Button size="large">버튼 1</Button>
        <Button>버튼 2</Button>
        <Button size="small">버튼 3</Button>
      </div>

      <div className="height">
        <Button size="large" color="gray">버튼 4</Button>
        <Button color="gray">버튼 5</Button>
        <Button size="small" color="gray">버튼 6</Button>
      </div>

      <div className="height">
        <Button size="large" color="pink">버튼 7</Button>
        <Button color="pink">버튼 8</Button>
        <Button size="small" color="pink">버튼 9</Button>
      </div>
    </div>
  );
}

export default App;

** app.scss

.App {
  width: 500px;
  margin: 0 auto;
  margin-top: 4rem;
  border: 1px solid gold;
  padding: 1rem;

  .height + .height {
    margin-top: 1rem;
  }
}

** 조건부 스타일링을 할 때 class 이름을 직접 조합해주는 것보다 편하게 작성
"yarn add classnames"

classNames("Button", "red"); → Button red
classNames("Button", {red: true}); → true일 때, Button red / false일때, Button
classNames({Button: true}, {red: true}) → Button red, true일 경우만!!

** /component/button.jsx

import classNames from 'classnames';
import React from 'react';
import './button.scss';

/*
    HTML에서 CSS class 적용
    <div class="button size">2가지 class 적용</div>
*/
function Button({children, size, color}) {
    // return <button className={["Button", size, color].join(' ')}>{children}</button>;
    // classnames 사용시
    return <button className={classNames("Button", size, color)}>{children}</button>;
}

Button.defaultProps = {
    size: 'medium',
    color: 'blue'
}

export default Button;

저작자표시 비영리 변경금지

'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글

2021.04.03 (0)	2021.05.18
2021.03.28 (0)	2021.05.16
2021.03.21 (0)	2021.05.12
2021.03.20 (0)	2021.05.11
2021.03.20 (0)	2021.04.20

현재글2021.03.27

shine의 개발 노트

게임 서버 개발자, 샤인의 IT 공부 노트

shine의 개발 노트

2021.03.27

'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글

'웹_프론트_백엔드/프론트엔드'의 다른글

티스토리툴바

2021.03.27

'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글

'웹_프론트_백엔드/프론트엔드'의 다른글

관련글

티스토리툴바