React

Create 기능 구현

수업소개

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

 

 

 

강의 - 베이스 캠프

 

 

 

강의 - Create 구현 : 소개

 

 

 

강의 -  Create 구현 : mode 변경

코드 변경 사항

 

 

 

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

코드 변경 사항

 

 

 

강의 - Create 구현 : form

 

코드 변경 사항

 

 

 

강의 - Create 구현 : onSubmit 이벤트

 

코드 변경 사항

 

 

 

강의 - Create 구현 : Content 변경

 

코드 변경 사항

 

 

 

강의 - Create 구현 : ShouldComponentUpdate 소개

 

 

 

 

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

 

댓글

댓글 본문
  1. 조혜정
    1. 상위 컴포넌트에서 props의 값을 하위 컨포넌트로 전달합니다. = 하위컨텐츠에서는 props를 통해서 상위 컴포넌트로 부터 값을 전달 받습니다.
    2. 하위 컴포넌트에서 상위 컴포넌트의 props 값을 변경하고 싶다면 하위컴포넌트에 이벤트를 만들고 그 이벤트의 함수가 작동했을때 그 함수에서 상위컴포넌트로 전달한 인자 값을 받아서 상위 컴포넌트에서 setState 를 이용하여 state 의 값을 변경하고 그 값이 변환 됨에 따른 if 문을 통해 props에 값이 변경 되도록 한다.

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

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

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

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

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

        불필요한 렌더링을 줄이고 성능을 향상시키기 위해서 ShouldComponentUpdate가 있는 것 같습니다. 그런데 그렇다면 애초부터 리엑트 자체가 렌더링시 이런 기능을 기본으로 검증해서 실행시키면 편할텐데, 왜 굳이 ShouldComponentUpdate라는 함수를 따로 두어 개발자에게 따로 검증하라고 한건가요? 혹시 이 함수가 남발되면 성능이 떨어지나요?
      • 안녕하세요 이고잉님 혹시 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) 여기서 두번째 인자를 못찾는 기분입니다..
        두서없는 질문 죄송합니다아...
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기