조타이 소개. 파생 원자. 데이터 유효성 검사

여기에서 무슨 일이 일어나고 있는지 읽으십시오.

입력 텍스트 값을 보유할 첫 번째 원자를 작성했습니다. 그런 다음 텍스트 길이를 유지하는 파생 원자를 만들었습니다. 이 코드를 기반으로 기본 유효성 검사와 함께 등록 양식을 만들어 보겠습니다.

먼저 텍스트 입력에 레이블을 추가하여 사용자가 이름을 입력해야 한다는 것을 알 수 있도록 합니다.

const nameAtom = atom("hello");

const Input = () => {
  const [text, setText] = useAtom(nameAtom);
  return (
    <div>
      <label>Name: </label>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
};

그런 다음 Input 구성 요소를 가져와 Form 구성 요소에 넣습니다. Form 구성 요소에 제목과 하나의 입력이 있습니다. 나중에 유효성 검사 결과를 표시하기 위해 Error 구성 요소를 추가합니다.

const Form = () => {
  return (
    <form>
      <h1>Registration form</h1>
      <Input />
    </form>
  );
};

이제 새로운 파생 원자를 만듭니다. nameLengthAtom에 따라 이름이 3자 이상인지 확인합니다. 길이가 3보다 크거나 같으면 이름이 유효합니다. 그렇지 않으면 그렇지 않습니다.

const isNameValid = atom((get) => get(nameLengthAtom) >= 3);

Error 구성 요소에서 이 새로운 원자를 사용하여 사용자가 입력한 이름이 유효한지 여부를 표시합니다. 이름이 유효한 경우 아무 것도 표시하지 마십시오. 이름이 유효하지 않은 경우 사용자에게 이름이 더 길어야 함을 알립니다.

const Error = () => {
  const isValid = useAtomValue(isNameValid);
  return isValid ? 
      null : 
      <div style={{ color: "red" }}>Name is too short</div>;
};

이 구성 요소에서는 isNameValid 원자의 값만 읽을 수 있으므로 useAtomValue 대신 useAtom 함수를 사용할 수 있습니다. 이것은 useAtom 의 보다 특수화된 버전입니다. 원자의 값을 변경하는 기능을 노출하지 않고 원자의 값에 대한 액세스를 제공합니다. 특수 API를 사용하면 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다. const isValid = useAtomValue(isNameValid);는 const [isValid] = useAtom(isNameValid);와 같습니다.

이제 Error 구성 요소를 Form 구성 요소에 추가할 준비가 되었습니다. 이Form 구성 요소를 응용 프로그램에서 사용할 수 있습니다.

const Form = () => {
  return (
    <form>
      <h1>Registration form</h1>
      <Input />
      <Error />
    </form>
  );
};

const App = () => (
  <Provider>
    <Container>
      <Form />
    </Container>
  </Provider>
);

이것을 확인하십시오 code live .

문서 및 Jotai 코드의 더 많은 예제는 Jotai website을 확인하십시오.