React/React 기본11 [생활코딩] 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. [생활코딩] React - 리액트의 유용성 / 컴포넌트 만들기 리액트가 없다고 가정했을때와 있을때를 비교하면서 리액트의 유용성을 느껴보자. Public이라는 디렉토리는 우리가 create-react-app에서 yarn start를 했을때 파일을 찾는 다큐먼트 루트이다. 저 Public 디렉토리에 리액트가 아닌 html 코드를 짜보겠다. (리액트가 없다고 가정하기 위해) WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 이 정도 웹페이지는 우리가 관리하기 편할것이다. 그러나 각 코드부분이 천만줄이라고 상상해봤을때, 코드가 한눈에 안들어온다. 저 태그는 다른곳에 안보이게 감추고 이름만 로 한다면 가독성이 좋아질것이다. 아래 코드는 컴포넌트를 만드는 코드이다. 저 코드를 해석해보.. 2020. 7. 26. [생활코딩] React - CSS / 배포 리액트에서 css를 수정하는 방법을 알아보겠다. 저 부분을 수정해보자. 앱을 새로고침 했더니 전체용량 2.1MB를 다운로드 받았다고 나온다. 기능이 하나도 없는데 2.1MB이나 된다? 그건 리액트가 기능의 편의성을 위해서 추가해놓은것들 때문이다. create-react-app의 개발환경의 파일의 무게는 무겁다. 여러 보안적인 문제도 그렇고 개발자가 아닌 사람들이 2.1MB를 쓰게 할수는 없다. npm run build 명령어로 빌드를 해보면 디렉토리 구조에서 이전에는 없었던 빌드파일이 생긴다. 저 폴더에 있는 index.html 파일을 보니 읽기 불편할 정도로 띄어쓰기가 안되어있다. 그 이유는 공백과 같이 불필요한 정보의 용량을 싹 날린거다. 그래서 용량이 훨씬 작다. 이렇게 create-react-ap.. 2020. 7. 26. 이전 1 2 3 다음
