전체 글 (47) 썸네일형 리스트형 [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 ··· 9 10 11 12 13 14 15 16 다음
