ire0546/REACT (7) 썸네일형 리스트형 컴포넌트 이벤트 만들기 이전에는 그냥 태그 안에 코드를 넣어서 단순히 사용하는 방식을 사용했다. 하지만 이번에는 컴포넌트를 이용해서 정리해보는 시간을 가졌다. 이미 Subject라는 컴포넌트는 다른 곳에 만들어두었고, subject 컴포넌트는 아래와 같다. 우선 Subject.js를 살펴보자. 그러면 이전에 한 곳에 만들었었던 onclick 이벤트를 사용해서 기존의 이벤트를 막는 preventDefault()를 사용한 다음, this.props.onChangePage() 함수를 사용하여 이 onChangePage 함수를 실행할 수 있도록 한다. 그리고 뒤에는 이 컴포넌트 객체 자신을 가리킬 수 있도록 함수 뒤에 .bind(this)를 추가해준다. 그리고 나서 다시 App.js를 살펴보자. Subject 컴포넌트를 물러온 모습이.. bind 함수와 setState 함수 이해하기 오늘 강의는 bind 함수와 setState 함수 이해하기에 대해 다뤘다. 1. bind() bind, 묶어준다 라는 뜻. render()라는 함수가 호출될 때, this는 그 컴포넌트 자신을 가리킨다. 위는 콘솔에서 테스트를 한 것이다. 우선, obj라는 변수를 만들어서 특정 값을 준다. 그리고 나서 bindTest()라는 함수를 만들게 되는데, 이 함수에서 this.name을 출력하게 하고 싶다. 그러나 여기서 this라는 객체가 무엇인지는 정의가 전혀 되어있지 않다. 이렇게 했을 때 undefined가 뜨는 것은 당연하다. 이 this가 특정 개체를 가리키게 하고, 이 obj값의 name을 출력하게 하고 싶다면, this가 무엇인지를 설정하게 해줘야 한다. 그래서 위와 같이 bindTest의 함수에.. 이벤트 state props와 render 함수 역동적으로 만들어주는 기술인 이벤트에 대해서 공부를 하였다. 예를 들어 클릭한 것에 대한 화면을 표시할 곳이 매번 달라지고 화면 출력이 달라지는 경우. mode를 설정해주기 그 mode에 따른 살태와 값을 설정해주기 render() 함수가 다시 호출됨으로써 다시 화면을 출력하게 되는데, 이 때 일어나는 이렇게 이벤트를 만드는 것이 목표임. porps와 state가 바뀌면 다시 함수가 호출 되게끔 만들어야 한다. 1. mode를 설정하고, 그 mode가 되었을 때 설정되는 props 값이라던지 state 값을 따로 설정해준다. 2. 그리고 if 문을 통해서 mode가 원하는 조건에 충족되었을 때, 어떤 값들을 바꾸게 될 것인지 설정해준다. 3. 이 값이(props나 state 값) 바뀌면 render() .. [4] React State 일단 강의 진도는 현재 컴포넌트 파일 분리하기까지 했다. 이전의 실습해서 App.js 파일에 한꺼번에 만들었던 컴포넌트들을 src 디렉토리에 components 디렉토리를 만들어서 각자 클래스 이름으로 js 파일을 만든 다음에 분산시켰다. 다음 코드 형식과 같이 모두 분리해보았다. 본래 컴포넌트 클래스를 가져다가 와서 React를 불러오는 코드를 상단에 추가해 준 다음에 export 문을 추가하여 다른 파일에서 이 파일을 import 할 수 있도록 해 주었다. 그리고 App.js에서 이 파일을 불러와야 하므로 상단에 import 문으로 불러와서 App.js에서 오류가 나지 않고 잘 사용되는 모습을 볼 수 있었다. 분할을 하더라도 보이게 하는 메인 코드는 같기 때문에 결과에는 지장이 없었다. 다음은 sta.. [3] React가 없다면? React의 장점 일반 html 코드를 react로 옮기는 연습을 간단하게 해 보았다. 이것이 컴포넌트의 느낌인가, 싶었다. 확실히 편하기는 할 것 같다. 웹 프로그래밍 프로젝트를 하면서 엄청 복잡하고 나눈다고 나눠도 나눠지지도 않고 관리도 힘들었는데 리액트로 작업을 하면 한 눈에 볼 수 있을 뿐더러 분할되니 관리도 훨씬 편리할 것 같았다. 같이 일할 때에도 많이 도움이 될 듯 하다. 컴포넌트를 몇 개 더 실험삼아 추가해보았다. 리액트는 일단 '정리의 도구' 정도로 보면 된다고 한다. 이것을 다른 사람이 정의한 웹 페이지나 나의 웹 페이지에 가져와서 쓸 수 있다는 엄청난 장점이 있다. 위와 같이 정의하던 태그 안에 this.props.title과 같이 props(속성 attribute와 동일한 것이라고 생각하면 됨)를 사.. [1-1] React 설치 오류 'npm run start' vs code에서 리액트 샘플 창을 띄우려고 npm run start를 했으나 위와 같은 오류가 나면서 실패함. "scripts": { "start": "react-scripts start" } 이 줄을 추가하니 이제 다른 오류가 발생해서 오류 메세지를 한 번 읽어보았다. 일단 생활 코딩에서 나오는 실행 전에 화면과 같은데, 어떤 요구되는 파일이 없는 것 같았다. 여러가지를 시도하고 깔아봤는데 결국은 정말 index.html 파일이 없어서 문제였다. 깔리는 과정에서 2.1.8을 제대로 깔았다고 생각했는데 그냥 최신 버전이 문제였다. 최신 버전을 까니까 튜토리얼대로 잘 진행된다. 이유는 모르겠다... [1] 생활코딩 React 공부 시작 class 기반의 객체 지향 프로그래밍을 기본으로 수업을 진행할 예정. 웹사이트는 매우 빠르게 복잡해진다. html 코드로 구현을 하려면 정말 정말 복잡해진다. 복잡한 코드를 정리하고 싶어지는 욕망에 따라 리액트를 사용하면 구현 시에 큰 도움이 될 것이다. 이것이 우리가 리액트를 배워야 하는 이유이다. 리액트는 컴포넌트로 이루어져 있다. '컴포넌트'를 이용하는 것이 기본이자 최대의 장점이다. 가독성, 재사용성, 유지보수 면에서 큰 장점을 가지고 있다. 남들이 만든 컴포넌트를 사용하여 더 많은 UI를 개발할 수 있다. coding -> run -> deploy 방식으로 진행할 예정이다. 공식 문서에 익숙해지는 것이 좋다. 1. 개발환경 세팅하기 https://ko.reactjs.org/docs/gettin.. 이전 1 다음
