React

Create 기능 구현

수업소개

react로 create 기능을 구현해봅니다. 

 

 

 

강의 - 베이스 캠프

 

 

 

강의 - Create 구현 : 소개

 

 

 

강의 -  Create 구현 : mode 변경

코드 변경 사항

 

 

 

강의 - Create 구현 : mode 전환 기능

코드 변경 사항

 

 

 

강의 - Create 구현 : form

 

코드 변경 사항

 

 

 

강의 - Create 구현 : onSubmit 이벤트

 

코드 변경 사항

 

 

 

강의 - Create 구현 : Content 변경

 

코드 변경 사항

 

 

 

강의 - Create 구현 : ShouldComponentUpdate 소개

 

 

 

 

강의 - Create 구현 : Immutable (불변)

 

댓글

댓글 본문
  1. 파시
    230704
    답글
  2. GelandeWagen
    ok
    답글
  3. Poroporo
    2021.08.09 Create 기능 구현 완료:)
    immutable에 대해서 알수 있는 좋은 시간이였습니다
    답글
  4. jeisyoon
    2021.06.03 Create 기능 구현 - OK
    힘들기는 하기만 보람이 있네요 ^^
    답글
  5. koabc0999
    새롭게 눈을 뜨게해주는 강의 정말 감사합니다.
    답글
  6. 생활둘기
    2021 1 21
    답글
  7. testrestbestwest
    감사합니다.
    답글
  8. 김인환
    냠냠냠...
    답글
  9. thebluerat
    휴
    답글
  10. JSMASTER
    component로 기본 값을 만들고 사용자가 사용할 수 있게(값을 줄 수있게) props를 통해 전달.
    상위 컴포넌트의 constructor함수는 render함수보다 먼저 실행되면서 초기화를 담당한다.
    하위 컴포넌트들을 여기서 state화 시킨다.
    하위 컴포넌트에서는 상위 컴포넌트를 변경 할 수 없다. 그래서 상위의 state를 변경하고 싶으면
    이벤트를 만들고 이벤트가 발생했을 때 this.setState를 이용해 변경되도록.
    state는 내부에서 작동하는 것을 모르게 하기 위해 사용하고 그것은 props를 통해 전달이 가능하다.
    state와 component에 수정이 있으면 render 실행되고 하위 컴포넌트들의 render도 잇달아 실행된다.
    render함수에 여러가지 경우의 것을 적고 return에 그것에 대한 실행을 담당한다.

    지금까지 학습한거 적었는데 잘못된거 있으면 댓글 달아주시면 감사하겠습니다.
    뭔가 만들어간다는게 재밌네요. 감사합니다.
    답글
  11. supernet
    감사합니다.
    답글
  12. 조혜정
    1. 상위 컴포넌트에서 props의 값을 하위 컨포넌트로 전달합니다. = 하위컨텐츠에서는 props를 통해서 상위 컴포넌트로 부터 값을 전달 받습니다.
    2. 하위 컴포넌트에서 상위 컴포넌트의 props 값을 변경하고 싶다면 하위컴포넌트에 이벤트를 만들고 그 이벤트의 함수가 작동했을때 그 함수에서 상위컴포넌트로 전달한 인자 값을 받아서 상위 컴포넌트에서 setState 를 이용하여 state 의 값을 변경하고 그 값이 변환 됨에 따른 if 문을 통해 props에 값이 변경 되도록 한다.

    제 정리가 부족해서 다른분들이 이해하실지 모르겠지만 이렇게 이해한 바를 써보니까 스스로 정리가 돼서 좋습니다^^
    답글수정삭제
  13. soO
    상위 컴포넌트가 하위 컴포넌트에 명령하려면 프롭스를 쓰고,
    하위 컴포넌트가 상위 컴포넌트에 명령하려면 이벤트를 쓴다.

    프롭스는 리드온니라서 자신 하위에 포함된 것들은 바꿀 수 있지만,
    자신 상위에 포함된 것들은 바꿀 수 없다. 그래서 이벤트로 간접적으로 명령하여 바꾼다.
    답글
  14. 최연우
    리액트 컴포넌트를 다루는 데이터는 props & state 2가지 입니다.

    props (properties)는 (매개변수처럼) 부모 컴포넌트가 자식 컴포넌트에게 데이터 값'만' 전달하지만,

    state는 컴포넌트 내부에서 (지역변수처럼) 선언하며 이벤트 값을 '생성/변경'할 수 있습니다.
    답글
  15. GimoDDI
    e.target.elements.title.value
    ,e.target.elements.desc.value
    로 해보시면 잘될꺼랍니다
    대화보기
      답글수정삭제
    • isoft
      form 내부의 아래 부분에서
      <p><textarea name="desc" placeholder="description"></textarea></p>

      name이 desc가 아니라던가 다른 오타가 있는건 아닌지 보시면 될 것 같아요
      대화보기
        답글수정삭제
      • nasa
        ❓❓❓[질문]❓❓❓
        ShouldComponentUpdate 파트에 대해 궁금한게 있습니다.

        불필요한 렌더링을 줄이고 성능을 향상시키기 위해서 ShouldComponentUpdate가 있는 것 같습니다. 그런데 그렇다면 애초부터 리엑트 자체가 렌더링시 이런 기능을 기본으로 검증해서 실행시키면 편할텐데, 왜 굳이 ShouldComponentUpdate라는 함수를 따로 두어 개발자에게 따로 검증하라고 한건가요? 혹시 이 함수가 남발되면 성능이 떨어지나요?
        답글
      • Lee
        안녕하세요 이고잉님 혹시 19.5 강의중에
        <form action="/create_process" method="post"
        onSubmit={function(e){
        e.preventDefault();
        this.props.onSubmit(
        e.target.title.value,
        e.target.desc.value
        );
        }.bind(this)}
        >
        이부분에서 e.target.desc.value가 인식?이 안됩니다...
        계속 TypeError: Cannot read property 'value' of undefined
        찾을수 없다는 에러가 뜨고 e.target.desc.value를 지우고 실행을 하면 title의 value값은 에러 없이 잘되는데
        왜 그런지 찾아봐도 찾아볼수가 없어서 이렇게 질문드립니다ㅠㅜ...

        현재 19.6 강의 까지 보고 공부중인데 역시 e.target.desc.value를 빼고 실행을 하면 19.6의 내용까지 잘 실행이 됩니다... 제가 처음에 버전을 그냥 깔아서 그럴까요....
        _article = <CreateContent onSubmit={(_title, _desc) 여기서 두번째 인자를 못찾는 기분입니다..
        두서없는 질문 죄송합니다아...
        답글수정삭제