React26 [생활코딩] React - 이벤트 설치 / 이벤트에서 state 변경하기 Subject 안에있는 a 태그를 눌렀을 때 Subject 밖에 있는 App의 state를 바꾸는것이 최종적으로 할거다. Subject에 있는 저 부분을 복사해서 App의 Subject 자리에 붙여넣고 아래와 같이 수정한다. a라고 하는 링크를 클릭했을 때 어떤 자바스크립트 코드를 실행되게 할거다. 자바스크립트에서는 onclick인데 리액트에서는 onClick이라고 적는다. 그리고 문자로 묶는게 아니라 중괄호로 묶는다. 리액트는 함수가 실행될 때 함수의 첫 번째 파라미터의 값으로 이벤트라고 하는 객체를 주입해주기로 약속되어있다. 개발자 도구에서 디버거를 만나면 브라우져가 디버거라는 부분에서 실행을 멈추고, Sources 라는 페이지에서 여러가지 정보들을 보기 쉽게 해준다. e라는 객체에 preventDe.. 2020. 8. 18. [생활코딩] React - 이벤트 state props 그리고 render 함수 리스트의 각각 링크에는 이벤트를 설치할거다. 일단 state설정부터 해보자. 현재 우리가 보고 있는 페이지가 웰컴 페이지인지, 읽기 페이지인지 구분하기 위해서 state에 mode라는 값을 줄거다. 리액트에서는 state의 값이 바뀌면 그 state를 가지고 있는 컴퍼넌트에 render함수가 다시 호출된다. 다시 호출됨에 따라서 그 render함수 하위에 있는 컴퍼넌트들도 render함수가 있는데 각각 싹 호출이 된다. (화면이 다시 그려지는것) render가 하는 역할은 어떤 html을 그릴것인가를 결정한다. 그래서 props나 state가 바뀌면 화면이 다시 그려진다. 모드의 값에 따라서 만들어지는 랜더링 결과가 달라지게 조건문을 사용해보겠다. 모드가 read라면? ※ 본 포스팅은 개인 공부 기록을 .. 2020. 8. 15. [생활코딩] React -Component 파일로 분리하기 / State / key 한 개의 파일안에 컴퍼넌트가 1000개라면 얼마나 복잡할까? 그리고 다른 파일에서 해당 컴퍼넌트를 가져다 쓰는것도 어렵다. 그래서 컴포넌트를 각각의 파일로 정리해보겠다. TOC.js안에 여러가지 변수나 함수들이 존재할수가 있다. 그러면 그 많은것들 중에서 어떤것을 외부에서 사용할 수 있게 허용할것인지 코드를 통해서 작성할 수 있다. 그게 export default TOC; state 개념은 props와 같이 살펴봐야된다. 제품을 만드는 사람들은 제품의 내부적인 구현을 위해서 다양한 상태를 사용하고, 다양한 내부적 조작장치, 매커니즘을 가지고 있다. 비유적으로 이야기하자면 그게 state이다. props는 사용자가 컴퍼넌트를 사용하는 입장에서 중요하고, state는 그 props의 값에 따라서 내부의 구현.. 2020. 8. 14. [생활코딩] React - props / React Developer Tools 여기서 Subject태그는 항상 같은 결과만 보여준다. 그래서 아래처럼 속성을 통해서 재사용성을 높이고 싶을거다. 리액트에서는 그 속성을 props라고 부른다. 현재의 상태를 알아내는 도구를 살펴보자. 이렇게 html 코드 말고 컴포넌트상의 코드를 보고싶을때가 있을거다. 그리고 값을 실시간으로 바꿀수도 있다. 이 도구를 이용함으로써 우리의 현재 문제점을 확인할 수 있게 되었다. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 8. 14. 이전 1 2 3 4 5 6 7 다음
