React

댓글

댓글 본문
  1. 파시
    230628
  2. chio
    20220222
  3. GelandeWagen
    ok
  4. Poroporo
    2021.08.06 이벤트 완료:)
  5. 정인우
    답변 감사합니다~ 설명하시려고 이벤트라고 비유하신 것 같긴 했는데 궁금했습니다~
    대화보기
    • egoing
      말씀하신 것처럼 prop입니다. prop을 이용해서 사용자 정의 이벤트를 만드는 것이라고 할 수 있습니다.
      대화보기
      • 정인우
        onChangePage는 이벤트가 아니라 그냥 단순히 prop이지 않나요...? event를 콘솔로그해봐도 아무것도 안찍히는데요.
      • 토템이
        2021.6.17 _ 강의 6. 컴포넌트 이벤트 만들기 첫번째 완료!

        안드로이드에서 setOnClickListener할 때 함수를 정의해 사용해줬던 것 같다.
      • jeisyoon
        2021.06.02 컴포넌트 이벤트 만들기 - OK
        휴 ~~ 진땀 납니다.
      • koabc0999
        정말 소름돋는 내용이였습니다. 이해하기 쉽지 않았는데 한줄 한줄 의미를 해석하며 읽어보니 왜 리액트를 쓰는지 아주 조금을 알 것 같은 느낌이 들었습니다. 늘 좋은 강의 감사합니다.
      • 푸른벚꽃
        21.4.5 강의 1, 2회독 완료
        21.4.7 강의 2, 2회독 완료
        21.4.8 강의 3, 2회독 완료
        21.4.9 강의 4,5 2회독 완료
        21.4.13 강의 6 1회독 완료
        21.4.29 중간고사를 보고 와서 많이 잊어버렸습니다.
        이걸 기회로 제가 따로 react를 공부하고 나서 다시 처음부터 돌려보겠습니다.
        지금 이 강의는 제게 어렵다고 생각되네요
      • 생활둘기
        2021 1 20
      • 고니스타크
        신년 11일차
        props 스테이트 이벤트 완료
      • 김인환
        냠냐먄먀냠냐먀냠냠냠냠냠냠!!!!!!
      • Blueyoun Bek
        this 바인딩 하기 싫으면 화살표 함수 사용 하면 된다
      • 김첨지
        수정한 파일 마다 ctrl s 누르세요
        대화보기
        • 하루만에한파트
          내용은 다이해가 가는데... vs code에서 ctrl s를 눌러서 저장하면 계속 형식이 깨져요 이것때문에 진도를 못나가네요 ㅠㅠ
        • Charlie Lee
          1번 bind에서 this에 대한 답변(? 제 생각?) 입니다.

          this는 자신이 속해있는 함수/객체/클래스 자체를 가리킵니다.

          집합으로 예시를 들어보겠습니다
          A = { 1, 2, 3}
          B = { 1, 2, 3, 4, 5}
          위와 같은 집합에서 A는 B에 포함되어 있습니다.

          A라는 집합에서 this를 사용하면, this는 A 자체를 가리킵니다.
          하지만 A가 끝나자마자 .bind(this)를 사용하면 여기서 this는 A를 포함하고 있는 객체(가장 가까운 부모객체)를 가리킵니다.
          즉, A.bind(this)를 사용한다면, A함수 내에서 사용하는 this는 B를 가리키게 되는 것이죠.

          함수 구조상으로 볼 때, 부모를 가리킨다고 보면 편할것같습니다 ^^



          <!--여기부터는 완전 추측성 글입니다-->
          만약, 자신과 가장 가까운 부모 객체가 아니라 다른 조상 객체를 함수에 bind 할 수 있는 방법이 없다면,
          React로 웹을 구성할 때는 무조건 2단구조로 가야할 것 같습니다.

          집합을 예시를 들어보겠습니다.
          A = {1}
          B = {1, 2}
          C = {1, 2, 3}
          만약 이런 구조가 있는데, A/B/C를 하나의 js 파일에서 처리하게 된다면, A에서 C의 state를 변경하기는 어렵습니다.
          A함수에서 .bind(this)를 통해 C의 객체를 불러올 수 없기 때문이죠.

          이런 경우에는, 2개의 js파일을 만들어야 할 것 같습니다.
          1번 파일은 A/B
          2번 파일은 B/C
          이런 방식으로 가서, A가 B의 state를 변경하고, B가 C의 state를 변경하여 최종적으로 state 변경이 이루어지고, 이에 따라 함수가 호출되도록 구조를 설계해야하지 않을까 싶습니다.

          더 잘 알고계신분들 있으시면 답글 달아주세요!
          대화보기
          • Charlie Lee
            궁금한 점이 생겨서 질문드립니다.

            이벤트 1강(맨 위의 16-1강의)를 실습하다가, console.log가 지속적으로 2회 찍히는 현상이 일어나고 있습니다.

            넣으신 것과 그대로 render 함수의 바로 하단에 console.log를 작성했는데, 모든 로그가 2회씩 찍히고 있습니다.

            render 함수가 왜 2회나 작동되는지 궁금한데, 혹시 이러신 분이 있었는지.. 만약 왜 그러는지 아신다면 알려주시기 바랍니다!!


            <!-- 문제 확인했습니다 -->
            혹시 저와 같은 문제를 겪으신 분들 있을까해서 답글남깁니다.

            이런 현상은 index.js에 <React.StrictMode>때문에 발생합니다.

            이 태그를 삭제해주면 1회만 실행됩니다. Strict Mode와 관련된 내용은 아래 링크 참고하시면됩니다~

            (링크: https://reactjs.org......tml)
          • supernet
            감사합니다.
          • 호눅스
            bind()의 동작 방식을 잘 몰랐었는데 이번 기회에 좀 더 확실하게 알게 되었네요.
            화살표 함수를 사용하면 this가 달라지는 것도 재밌어요.
          • 고구마
            a href="/" 하니까 하이퍼링크가 안달리더라구요 그래서 a href="#"하니까 되었습니다.
          • 그리
            감사합니다!
            대화보기
            • 정성훈
              자기 자신을 호출하겠다는 의미입니다.
              대화보기
              • 할수이따
                2020.03.06
              • 그리
                href="/" 라는 링크를 걸어두셨는데, /만 두면 무슨 의미인지 알 수 있을까요? ㅠㅠ
              • 밴쿠버코알라
                안녕하세요 수업 잘 보고 있습니다. 강의 1에서 변수 설정 할 때 언더바를 사용하셨는데 그냥 내부적으로 사용하기 위해 선언한 것일뿐인가요?
                근데 제가 저렇게 변수를 설정하니까 에러가 떠서 일반 변수로 설정했는데 왜 이런 에러가 뜨는걸까요?
                Expected an assignment or function call and instead saw an expression no-unused-expressions
              • 현수
                감사합니다
              • 현수
                감사합니다
              • 컴퓨터세상
                egoing님 리액트 강의 정말 잘 듣고 있습니다 늘 좋은강의 감사합니다!
                공부하다가 질문이 생겨 댓글을 남겨요.

                1. bind의 사용법이 .bind(bind하고싶은 객체)라면, bind(this)를 했을 때 어떻게 맥락상 this가 App 객체를 가리키게 되나요?? 왜 this만 넣어줘도 App을 this로 받을 수 있는지 이해가 잘 안갑니다ㅠ

                2. element에 이벤트를 등록할 때, 자바스크립트에서는 inline방법(onClick과 같은)보다 addEventListner가 가장 이상적이라고 알고있는데 리액트에서는 다 그냥 onClick하면 리액트가 알아서 적절하게 해석을 하나요? 별로 고민하지 않아도 되는 문제인지 궁금합니다.

                3. 여러개의 다른 Component에 이름만 같고(onChangePage) 내용은 다른 함수를 사용하고 있는데... 이건 각 component에서의 메소드로 약간 지역변수같다고 이해하면 되나요? 그래서 같은이름이라도 충돌되지 않고 자유롭게 사용이 가능한건가요??

                아시는 분이 있다면 답댓으로 알려주시면 정말 감사하겠습니다~!
              • lygon
                완료
              • 이제시작
                완료
              • 소윤호
                this bind 에 대한 설명을 적어볼게요

                ex)
                function a(x, y, z){
                console.log(this, x, y, z);
                }
                var b = {
                c: 'test'
                }
                var d = a.bind(b, 1, 2, 3);
                d();

                ------------------------------------
                결과)

                {c: "test"} 1 2 3 이렇게 나옵니다.
                즉 bind는 이벤트의 this를 연결고리라고 생각하면 될것 같습니다.
                -------------------------------------------------------------------------------

                bind 함수 쓰기 싫어서 찾아봤습니다. => 함수를 사용 하면 됩니다.

                handleClick = (e) => {
                e.preventDefault();
                this.setState({
                mode:'Welcome',
                })
                }

                render()함수 위에 handleClick 함수를 작성하고 클릭 대상에게 onClick으로 this를 연결시켜주면 끝입니다.

                <h1><a href="/" onClick={this.handleClick}>{this.state.Subject.title}</a></h1>
              • 리아포
                복습 중에 궁금한 것이 하나 생겨서 여쭤봅니다^^ onChangePage 함수를 이벤트를 통해 실행시키는 onClick 함수에서는 e.preventDefault()를 해주는데, 함수 onChangePage를 정의할 때는 왜 e.prenventDefault()를 하지 않나요?
                이벤트를 실행할 때 페이지 리로드가 되기 때문에, state만 변경시켜주는 onChangePage는 e.preventDefault()를 해줄 필요가 없어서 그런게 맞을까요?
              • 리아포
                잘 봤습니다! 감사합니다:)
              • 폭스킴
                혹시 이 챕터만 들으시고 안 들으실까봐 답글 드립니다.
                이고잉님 이메일 공지에 따르면,
                앞으로도 5월 1일까지 두 챕터를 더 공개하실 예정이예요~
                매일 오전 11시에 공개하신다고 합니다.
                이게 마지막이 아니예요~ ^^
                대화보기
                • 용영에쥬
                  이고잉님! 안녕하세요!
                  React 강의 열심히 듣고 있습니다!
                  React의 마지막 챕터인 이벤트는 언제 업로드 해주시나요?
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기