inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

데이터추가하기에서 못넘어가고 있어요....ㅡㅡ

304

작성자 없음

작성한 질문수 0

0

강사님 강의를 열심히 듣고 있습니다.

근데, 잘 따라가다가 데이터 추가하기에서 정말 몇번씩 다시 써보고 확인했는데 전혀 동작을 하지 않습니다.

그전까지는 잘 되었구요,

어떻게 해결을 해야할지....ㅠㅠ

 

강사님 소스를 다 복사해서 붙여봐도 안되어요....

일기저장하기 버튼을 클릭하면 아무것도 동작하지 않습니다. alert 창도 뜨지 않구요

 

App.js 파일

import {useRef, useState} from "react";
import './App.css';
import DiaryEditor from './DiaryEditor';
import DiaryList from './DiaryList';
import { getActiveElement } from '@testing-library/user-event/dist/utils';

// const dummyList = [
//   {
//     id:1,
//     author:"홍길동",
//     content:"하이 1",
//     emotion:5,
//     created_date : new Date().getTime()
//   },
//   {
//     id:2,
//     author:"김경숙",
//     content:"하이 2",
//     emotion:2,
//     created_date : new Date().getTime()
//   },
//   {
//     id:3,
//     author:"아무개",
//     content:"하이 3",
//     emotion:1,
//     created_date : new Date().getTime()
//   }
// ]

function App () {

  const [data, setData] = useState([]);

  const dataId = useRef(0);

  const onCreate =(author, content, emotion) =>{
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id : dataId.current
    }
    dataId.current += 1;
    setData([newItem, ...data]);
  };

  return (
    <div className="App">
     <DiaryEditor onCreate={onCreate} />
     <DiaryList diaryList={data} />
    </div>
  );
}

export default App;
 

DiaryEditor.js 파일

import {useRef, useState} from "react";  

const DiaryEditor =({onCreate}) =>{

  const authorInput = useRef();
  const contentInput = useRef();


  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1
  });

  const handleChangeState = (e) =>{
    setState({
      ...state,
      [e.target.name]:e.target.value,
    });
  };

  const handleSubmit = () =>{
    if(state.author.length < 1){
      authorInput.current.focus();
      return;
    }

    if(state.content.length < 5){
      contentInput.current.focus();
      return;
    }

    onCreate(state.author, state.content, state.emotion);
    alert("저장성공");
    // setState({
    //   author: "",
    //   content: "",
    //   emotion: 1,
    // });
  };

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          ref={authorInput}
          name="author"
          value={state.author}
          onChange={handleChangeState}            
        />
      </div>
      <div>
        <textarea
          ref={contentInput}
          name="content"
          value={state.content}
          onChange={handleChangeState}  
        />
      </div>
      <div>
        <select
          name="emotion"
          value={state.emotion}
          onChange={handleChangeState}  
        >
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onClick={handleSubmit}>일기 저장하기</button>
      </div>
    </div>
  );
};

export default DiaryEditor;

 

 

nodejs react javascript

답변 1

0

이정환 Winterlood

안녕하세요 이정환입니다.

보내주신 소스코드 중 DiaryEditor.js 파일 내 handleSubmit 함수 안에는 이런 조건문이 있습니다.

해당 조건문은 현재 content(일기)에 입력된 문자열의 길이가 5 미만일 때, 저장되지 않게 설정하는 조건입니다.

강의 중 일기 컨텐츠의 길이가 5 미만일 때는 저장하지 않도록 해당 조건문을 작성한다고 설명드린 부분이 있으니 참고 부탁드립니다.

 

또 보내주신 질문의 사진에는 "하하하"로 3글자만 입력되어있습니다.

따라서 5글자 미만이므로 저장이 되지 않는 것 입니다.

 

0

gangsugi

앗 .....이런....해당하는 부분의 소스만 열심히 봤네요...답변 감사드립니다.

 

에러 질문드립니다

0

23

2

VSCode 설정 문의

0

44

2

PPT 코드 관련 질문

0

35

2

useEffect와 lifecycle문의

0

44

2

프론트엔드 학습 수준 문의

0

62

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

59

2

데이터 로딩중 화면만 계속 나와요!!

0

58

2

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

0

90

2

이후의 커리큘럼 문의

0

107

2

실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.

0

56

2

최적화 관련 질문있습니다 (useMemo 등)

0

93

3

프로바이더 컴포넌트의 위치는 어떤 기준인가요?

1

88

3

Date 객체에 관련하여 질문드립니다.

0

90

2

리액트 개정판 교재 질문

0

62

2

예제코드가 안나와요!

0

79

2

select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com

0

115

2

onMouseEnter 관련 문의 드립니다

0

98

3

배열의 렌더링 관련 질문 드립니다.

0

78

2

2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.

0

123

2

TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?

0

143

2

useCallback 적용한 onCreate, onUpdate, onDelete 함수..

0

71

1

vs code 자동완성관련 문의

0

140

2

91강 useEffect내에서 상태변화함수 호출시 발생하는 에러

1

193

2

87강 필터 함수 질문

0

72

2