이때동안 컴포넌트를 App.js 이라는 같은 파일에 다 넣어 놨었다. 하지만 글자수가 많아지면서 눈도 아파 질터이니 따로 분리하도록 한다 그편이 먼 미래에 유지보수도 좋아지기 때문이다 지금부터 이 컴포넌트를 옮겨 보도록 한다 일단 component라는 폴더를 생성하고 그안에다가 따로 격리 시키도록 하자 옮기고 싶은 컴포넌트의 이름과, 동일하게 JavaScript 파일을 생성한다 그리고 간단하게 복붙하였다 근데 const 다음의 함수명이 뭔가 심상치 않다. 아파보이기때문에 문제가 있을 것이다 그리고 App.js에 가봐도, TestComponent가 피가 흐르고 있는 것을 볼 수 있다 그이유는 App.js에는 더이상 TestComponent라는 것이 없기때문이다. 그러므로 import를 하도록 하자 impo..
저번시간에 Component를 만들어 보았다. 근데 상위 Component에서, 하위 Component로 데이터를 보내고 싶었는데 보낼수가 없었다... 왜냐하면 함수가 다르기 때문이였다. 그래서 이번엔 props를 배워보았다. 저번시간에 내용은 이거시다. 일단 props를 이용해서 문자열을 하나 보내보자! 아래의 사진의 빨간색 네모안을 추가하였다 title이나 name이나 src나 저런 것들을 속성이라고 한다 React 도큐멘트에서도 저런식으로 쓰면 된다 카더라 저걸 보고 깨닫고 난 아래의 코드를 작성하였다 props의안에 title라는 속성이 담겨져 있다고 보면 된다 그리고 그걸 바로 변수에 담아서 jsx코드에 넣어 보았다 그러는순간 바로 간지나게 이렇게 되어버렸당 그렇다면 좀 더 응용을 해보자 데이터..
React는 Component기반이기 때문에 Component단위로 만들지 않으면 의미가 없다고 한다. 그러기 때문에 이번엔 Component를 배워본다 컴포넌트를 만들기 위해서, 기존에 있는 코드 중에 를 추가 하였다. 근데 피가 흘리게 된다. 왜냐하면 함수를 작성하지 않았기 때문이다 * React에서 컴포넌트를 만들 땐 무조건 반드시 맨 앞에 문자는 대문자를 하도록 하자 ex ) Createcomponent, TestComponent, Rrrrrr etc.. const TestComponent = () => { return ( 안녕 난 Component야 반가워 ) } 이런 식으로 추가하면, 아까 피가 흐르던걸 지혈할 수가 있다 그러면 이렇게 컴포넌트를 분리시켰고, 화면에 나타나게 해 보았다! 다음엔..
