1. props html에서의 attribute를 React에서는 props라고 한다. (아마 용어를 겹쳐 쓰기 않기 위함인듯) 이 props를 사용한다면 저번까지는 매번 똑같이 나오는 Subject태그의 데이터를 자유롭게 바꿀 수 있다. 다음과 같이 props의 이름을 적어주고, 클래스 App에서 해당 props로 데이터를 전달해준다. 페이지 소스를 확인하면 올바르게 코드가 삽입된 것을 확인할 수도 있다. 하지만 더 잘 확인하려면??!!! 2. React Developer tool 현재 코드 상태를 알 수 있는 tool이 있다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?h..
대단원의 막을 시작해자!! 두둥 그것은 바로바로 컴포넌트를 만드는 것!!야호 배고프다 하하 1. 기본 html public 디렉토리는 npm run start를 했을 때, 파일을 찾는 document root이다. react가 쓰이기 전의 html코드를 짜보자. public폴더에 pure.html이라는 파일을 새로 만들었다. 리액트를 적용하지 않은 기본 html코드와 적용 페이지이다. 조금 더 복잡하게 보이기 위해 시멘틱 태그로 감싸보았다. * 시멘틱 태그 : 기능상의 변화는 없지만, 코드의 구분을 위해 의미록적으로 적는 태그 만약 코드가 천만 줄, 일억 줄이라면 한 눈에 코드가 들어올까? 복잡한 코드를 그대로 보이지 않고, 다른 곳에 숨겨둔 후 메인 페이지를 구성하는 파일에는 이름만 적어주면(사용자 정..
1. deploy하는 법 페이지 소스에서 아래 부분을 보면 용량이 나와있는데, Hello, World!라는 출력문밖에 없는데 1.7MB인 이유는 개발자를 편하게 하기 위한 기능을 다 넣어두었기 때문이다. 하지만 사용자에게 너무 무거운 파일을 배포할 수 없다. 원래는 npm run start 라는 명령어를 통해 페이지를 열었지만, npm run build 라고 명령어를 입력하면 새로운 build라는 디렉토리가 추가된다. build디렉토리 안에는 우리가 알고 있는 파일들이 있지만, 코드를 확인해보면 공백이 하나도 없다. 이미 가지고 있는 불필요한 정보들을 모두 살균시켰기에 그러한 상태이며, 그래서 용량이 작다. 보안적으로, 또한 심미적으로 좋지 않은 부분을 없앤 후에 index.html을 알아서 처리해주는 ..
1. 디렉토리 디렉토리 구조를 보면 src, public이 있는데, 현재 보이는 페이지는 index.html이라는 파일이며, 이 파일은 public디렉토리 내에 있다. index.html을 보면 id='root'가 있다. 리액트를 통해 컴포넌트들을 만들어 갈 때, id가 root인 곳인 태그 안에 컴포넌트를 넣도록 약속을 해 놓은 것이다. 코드를 확인하면 index.html에는 적혀있지 않지만 리액트를 통해 만든 태그들이 삽입된 것을 확인할 수 있다. 그렇다면 컴포넌트들은 어디서 수정할 수 있을까? 바로 src디렉토리 내에서 수정할 수 있다. 앞으로 리액트로 개발을 하게 되면 src 디렉토리 안에 파일을 만들어 작성할 것이다. 진입 파일은 index.js이고, 이 파일에서 주목해야 할 부분은 빨간색 박스..
1. React facebook.com에서 UI(사용자 인터페이스)를 더 잘 만들기 위해 만든 자바스크립트 UI이다. 웹 사이트는 많아지는 정보에 따라 매우 빠른 속도로 복잡해진다. 정보를 표현하는 html태그들은 점점 복잡해지고, 그에 따라 코드는 더욱 복잡해진다. 2. React의 대략적 모습 수많은 태그로 이루어진 웹페이지 파일(main.html)이 있고, 이 코드는 top, body, bottom으로 나뉘어져있다고 가정해보자. 그렇다면 React는 간단히 말해서, top을 이루는 태그들을 따로 빼서 top.html이라는 파일을 만들고, 메인을 이루는 main.html에서 분리된 top을 불러 지금까지 몇 십줄이었던 top을 이루는 코드 대신에 이라는 사용자 정의 태그를 사용하는 것이다. 이렇게 사..
