appmaster

컴포넌트를 적절히 잘 분리하면 유지보수도 쉬워지고, 생산성도 높아지는 특징이 있습니다. JSX 문법의 특징중 componenet를 추가하려고하면 div태그 안에 넣어서 해야합니다. 안그러면 오류납니다. 또한, 다음과같이 클래스를 분리해서 필요한 클래스를 최종 클래스안에 계층적으로 나타내는것이 좋은 방법입니다. 다음은 복수로 나타내기때문에 배열로 표현하겠습니다. 여기서 보면 알 수 있듯이, 여러번 customer컴포넌트를 입력해야하는 불편함이 있습니다. **map을 이용해봅시다** 다음과 같이 선언하면 오류가 납니다. 이것에 대한 식별값인 key값이 없기 때문입니다. *key를 사용해봅시다* 아까전에 소스코드보면 알 수 있듯이, id값은 각각 다르기 때문에 key값으로 합니다.

우선 이러한 클래스들이 만약 하나의 js파일에 천개 만개 이상이 들어간다고 상상해봅시다. 매우 복잡해 질 것입니다. 그래서 할 작업은, 각각의 컴포넌트들을 분해해서 작성해 보는겁니다. 1. SRC폴더 안에 components 폴더를 만드는 것입니다. TOC.js파일을 만들고 기존에 App.js파일 안에있는 TOC 소스코드를 긁어옵니다. 그런데 문제가 발생할겁니다. 다음의 문제인데요, 컴파일이 되지않는겁니다. 이것을 해결하기위해서는 import해야할 것이 있습니다. 이뜻은 Componenet라는것을 로딩하는 코드가 없다는 뜻입니다. 2. 파일안에 import해줍니다. 그럼 이뜻은 react라는 라이브러리에서 Component라는 클래스를 로딩한것입니다. Component 단어 앞에 React라는 단어는 꼭..

다음과 같이 Subject를 두번입력하면 그냥 똑같은것이 두번출력됩니다. 이부분에 대해서 react는 아쉽게 생각하게 됩니다. 이것을 해결하기위해서 props를 이용하게 됩니다. 하단 링크에서 참고하세요! ko.reactjs.org/docs/components-and-props.html Components and Props – React A JavaScript library for building user interfaces ko.reactjs.org 확인해보면 props사용방법을 알 수 있게 됩니다. 이제는 이 개념을 본인이 만든 소스코드에 접목 시켜보겠습니다. 이부분을 바꿔보도록 하겠습니다. Subject 클래스와 App클래스의 변경사항을 쉽게 비교하기 위해서 잠시 Subject클래스를 밑에 내렸습니..

우선 왼쪽부분에 html코드가 완성된 코드라고 봅니다. 그리고 header태그 영역을 컴포넌트로 만들고자 합니다. 그럼 클래스를 선언해야하는데, 클래스의 이름을 Subject라고 하고 Component를 상속받게합니다. 그리고 밑에 render()은 함수인데, function render()라고 선언하지않아도 같은 기능을 하게 업데이트 되었습니다. return안에 header태그를 넣어줍니다. 그럼 header태그는 컴포넌트로 만들어 진것인데, 이것을 사용하려면 Subject태그를 내가 원하는 위치에 사용하면 되는것입니다. 브라우저에서 어떻게 보이는지 볼까요? 보면 header태그는 App클래스 div태그 안에 들어있는것을 보실 수 있습니다. 신기한것은 웹브라우저는 react의 존재를 모릅니다. 왜냐하면..