React - 공식문서 읽어보기3

조건부 렌더링 ( Conditional Rendering )

 

조건부 렌더링은 자바스크립트에서의 조건 처리와 똑같이 동작합니다. 조건문이나 조건부 연산자를 사용하면 현재 상태를 나타내는 요소를 생성 및 사용이 쉽게 가능합니다. 

 

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

위 코드 처럼 isLoggedIn prop에 boolean값에 따라서 다른 element를 출력하는 것을 볼 수 있다. 

 

function UserGreeting(props){
  return <h1>{props.name && `${props.name},`} Welcome { props.count > 0&& `It's ${props.count} times`}</h1>
}

function GuestGreeting(props){
  return <h1>Please sign up.</h1>
}

function Greeting(props){
  return props.isLoggedIn ?  <UserGreeting name="Evan" count={2}/> : <GuestGreeting /> 
}

export default function ConditionalRendering() {
  const isLoggedIn = true;
  return (
    <div>
      <Greeting isLoggedIn = {isLoggedIn} />
    </div>
  )
}

이 위에 코드 또한 조건부 렌더링의 아주 좋은 예이다. 맨 밑에 있는 ConditionalRendering 함수가 실행되고, isLoggedIn의 Boolean값을 확인하고, Greeting에 상태를 전달하고, Greeting에서 현재 받아온 props값을 보고 컴포넌트를 반환하는데, 해당 UserGreeting이라는 함수에는 논리 연산자를 이용해, 깔금하게 falsy현상을 방어 하였다. 여기서 props.count가 0이라면 비교 연산자가 없다면 카운터가 0개가 있지만 falsy 현상이 일어나 0이라도 출력하게되는데, Boolean을 감싸줘서 확실이 불린에서 갈라주던가 해야한다고 한다. 

 

---

리스트와 키 ( List & Key  )

 

numbers라는 배열 변수에서 map 배열함수를 사용해 리스트 요소를 출력하고 해당 list들을 ul태그로 감싼뒤, 렌더링하는 코드이다. 문제가 없어보이지만 에러가 나올것이다. 

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Error Message

한번 읽어보자, list안에 각 요소들을 유니트한 '키'값을 속성으로 가지고 있어야한다고 말해준다.

  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

그렇다면 map함수를 실행할 때 한번 넣어보면 에러 메세지가 사라지는 걸 확인 할 수 있었다. 이제 Key값에 대해 알아보자.

 

KEY 는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는데, 요소에 안정적인 고유성을 주기 위해 배열 요소안에 지정을 해주어야합니다. Key를 선택하는 가장 좋은 방법은 해당 항복을 고유하게 식별할 수 있는 문자열을 사용하는건데, 대부분 데이터의 ID를 Key로 사용하는 경우가 많다고 합니다. 최후의 수단으로는 index값을 Key로 사용할 수 있지만, key와 rerendering 관련해서 참고할 때 보았듯이 항목의 순서가 바뀔경우 권장되지 않습니다. 그리고 리스트안에 key를 할당해 준다음 그 Key를 props로 받아서 자식요소에서 쓰려고해도 인식이 되지않습니다. 왜냐하면 Key는 자식요소에 props에 넘어가지 않습니다. React에서는 Key값을 오로지 고유한지 판단하기 위해서만 사용되기 때문이죠. 

 

https://ko.reactjs.org/docs/lists-and-keys.html

리스트와 Key – React

 

---

폼 ( Form ) 

 

HTML에서 Form 요소는  해당 요소 자체가 내부 상태를 가지기 때문에 다른 리액트에서 다른 DOM 요소와는 다르게 동작합니다. 

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

이 form 요소는 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행합니다. React에서 동일한 동작을 원한다면 그대로 사용하면 됩니다. 하지만 대부분은 자바스크립트 함수로 Submit을  처리하고 사용하는게 데이터를 처리하기 편합니다. 이를 위한 표준 방식을 제어 컴포넌트 ( Controlled Components ) 라고 불리는 기술을 이용하는 것입니다. 

 

 

제어 컴포넌트 ( Controlled Component )

    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={name} onChange={handleChange} />
      </label>
      <br/>
      <br/>
      <label>
          Essay:
          <textarea name="essay" value={essay} onChange={handleChange}/>
      </label>
      <br/>
      <br/>
      <select name="flavor" value={flavor} onChange={handleChange}>
        <option value="grapefruit">Grapefruit</option>
        <option value="lime">Lime</option>
        <option value="coconut">Coconut</option>
        <option value="mango">Mango</option>
      </select>
      <input type="submit" value="Submit" />
    </form>

위 코드는 Controlled Component의 예시를 합쳐놓은 경우인데, 특히나 input이나 selsect 태그 같은 경우는 form안에 있으면 데이터를 가져오기 편하다. 그리고 값이 바뀔때마다 useState를 사용하여 value를 관리가 가능하고, 또한 같은 handle함수로도 공유해서 사용이 가능한데, 이럴땐 name이나 혹은 type로 어떤 입력인지 분류를 해야한다. 

 

비제어 컴포넌트 ( Uncontrolled Component )

<form onSubmit={handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={fileInputRef} />
        </label>
        <br />
        <button type="submit">Submit</button>
</form>

파일 입력 태그는 대표적인 비제어 컴포넌트다. 애초에 파일을 사용자가 로컬에서 선택하면 이제 서버에 업로드하거나 파일 API를 사용하여 자바스크립트로 조작할 수 있는데, 프로그래밍적으로 값을 설정할 수 없고 사용자만 값을 설정할 수 있다. 파일 API 사용해 상호작용을 해야하는데, 밑에 처럼 useRef를 사용하면 접근이 가능하다. 

  const fileInputRef = useRef(null);

  function handleSubmit(event){
    event.preventDefault();
    alert(
      `Selected file - ${fileInputRef.current.files[0].name}`
    );

 

 

https://ko.reactjs.org/docs/forms.html

폼 – React

 

https://ko.reactjs.org/docs/uncontrolled-components.html

비제어 컴포넌트 – React