React - velopert html 정리(1)

neity16·2020년 9월 28일
0

React

목록 보기
5/21
post-thumbnail

(본 글은 Velopert님의 https://react.vlpt.us/ 를 정리한 내용입니다.)

(React 등장 배경)

  • 기존 자바스크립트를 사용해서 동적인 처리를 하기 위해서는 DOM을 직접 건드려야 했다.
    (이러한 방식은 규모가 커지면 관리하기 힘들어짐)
  • 그래서 AngularJS와 같은 프레임 워크가 등장한다. 이 프레임 워크의 원리특정 값이 바뀌면 특정 DOM의 속성을 바꾸어서 업데이트를 해주는 방식
  • 하지만, 리액트Virtual DOM을 이용해서 업데이트 된 곳만 파악한 뒤,
    전부 다 날리고 새로 만들어서 보여주는 방식

defaultProps

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}
>
Hello.defaultProps = {
  name: '이름없음'
}

props.children

: 개발자가 만든 컴포넌트 안에 컴포넌트를 넣기 위해서는** props.children**을 사용해야 한다.


  • Wrapper컴포넌트Hello라는 컴포넌트를 넣는 예제

(App.js)

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

(Wrapper.js)

function Wrapper({ children }) { // props.children을 비구조화 할당으로 받는 부분
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children} // 출력
    </div>
  )
}

조건부 렌더링

** 1) 삼항 연산자 사용**

 <div>
   { isSpecial ? <b>*</b> : null }
 </div>

** 2) && 사용 (권장 방법)**

<div>
  {isSpecial && <b>*</b>}
</div>

input값 보이게 하기 (기본)

: **onChange()**와 **이벤트 객체(e)**를 통해서 설정


function InputSample() {
  const [text, setText] = useState('');
>
  const onChange = (e) => {
    setText(e.target.value);
  };
>
  const onReset = () => {
    setText('');
  };
>
  return (
    <div>
      <input onChange={onChange} value={text}  />
      <div>
        <b>: {text}</b>
      </div>
    </div>
  );
}

input값 보이게 하기(개선)

: 여러개의 input값을 처리할 때 하나 씩 변수를 useState()로 해도 괜찮지만,
여러 변수를 받는 Inputs를 통해서 하나의 onChange로 사용할 수 있다.


function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });
>
  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출
>
  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };
>
  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <div>
        <b>: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

  • input 객체의 내부 값에 대한 접근 방법
   inputs[name] = value;

특정 DOM 선택하기 (useRef 사용)

: JS에서 특정 DOM에 접근하기 위해 geElementById, querySelector을 사용했다.
리액트에서는 ref라는 것을 사용해서 특정 DOM에 접근한다.


1) ref 변수 선언

   const nameInput = useRef();

2) 접근 할 DOM에 ref 선언

      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput} // ref 선언
      />

3) ref 사용

    nameInput.current.focus(); // focus말고도 다른 함수도 존재!

key의 존재와 업데이트 방식

1) key가 없을 때
: **key가 없을 때 **삽입을 하게 되면 중간에 들어가는 것이 아니라 하나 씩 밀리면서 들어간 것처럼 보이게 된다   (비효율적)


2) key가 있을 때
: key가 있다면 각 엘리먼트를 식별하여 효율적으로 연산이 이루어진다.(효율적)

useRef를 사용해 컴포넌트 내부 변수 만들기

: state값이 변경되면 re-render 되기 때문에 re-render이 필요 없는 변수를 사용할 때에 useRef를 이용한다.


** 1) 선언**

  const nextId = useRef(4); // 들어가는 값은 초기화 값

** 2) 사용**

 nextId.current += 1;

배열 항목 추가하기

: React에서는 효율적인 렌더링을 하기 위한 React.memo사용을 위해 state값은 불변성을 지켜야 한다. 따라서    배열의 원본 값에 추가하는 concat이나 ...(spread 연산자)가 필요하다.


** 1) spread 연산자 사용(...)**

    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);
    // users라는 state에 입력된 값을 추가하는 코드이다.
    // spread 연산자 ...를 사용해서 원본 값에 추가하여 state를 변경하였다.

** 2) concat 사용**

    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));
    // users라는 state에 입력된 값을 추가하는 코드이다.
    // .concat(추가할 값) 을 통해서 원본 값을 유지한 채 추가하였다.

배열 항목 제거하기

: id값을 넘겨 받은 뒤 .filter()를 사용해서 하면 편하다.


  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
      )
    );
  };

  • 특정 값에 따라 style을 다르게 적용 가능
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
      >
        {user.username}
      </b>
profile
Developer & PhotoGrapher

0개의 댓글