hololo (23) 썸네일형 리스트형 생활코딩 React2(Event) 필기 보호되어 있는 글입니다. 7] React State 1. State 입문자에겐 State와 props의 차이를 이해하기 어렵다. (물론 나도) 어떤 제품이 있을 때, 사용자의 UI들이 리액트의 관점에서는 props이다. 반대로 내부적인 구현을 위해 상태를 다양하게 바꿀 수 있는 것을 state라고 한다. 즉 개발자의 입장에서는 state를 주목해야 한다. state는 props의 값에 따라 내부 구현에 필요한 것이라고 얘기할 수 있다. 사용자는 props를 통해 컴포넌트를 마음대로 조작할 수 있지만, state는 건드릴 수 없으며, 또한 알아서도 안된다. 옆의 그림처럼 내부 state는 철저히 분리되어있다. 2. State 사용 App.js를 보면, App컴포넌트 안에 Subject라는 하위 컴포넌트가 존재한다. Subject 안에 있는 props들을 s.. 6.5] React Props (default props) 1. Default Props props의 기본값을 주고 싶을 때나, 경우에 따라 비워놔야 할 때가 있다. 그러한 경우에 props의 기본값을 설정해 줄 수 있는데, 그것이 바로 defaultProps이다. 저번 App.js파일의 마지막 컴포넌트인 밑에 새로운 라는 컴포넌트를 만들어 보았다. 에서는 하나의 props를 가지는데, props의 이름은 dp(defaultProps의 줄임말....인데.....동적 프로그래밍이 생각난다...ㅎㅎ)으로 정하였다. defaultProps는 render() 함수 전에 적어준다. 그리고 App컴포넌트에 defaultProps값이 잘 출력되는지 확인하기 위해 (App.js에서) 17line에는 props값을 지정해주었고, 18line에는 그냥 컴포넌트 명만 적어주었다. .. 6] React Component 분리 1. Component 분리의 필요성 현재 코드를 보면 4개의 컴포넌트들이 있다. 하지만 만약 천개, 만개의 컴포넌트들이 있다면? 그리고 외부의 다른 파일에서 컴포넌트들을 사용하고 싶다면? 이는 컴포넌트들을 각 다른 파일로 분리하는 것으로 해결할 수 있다. 훨씬 더 코드가 간결해지며, 필요한 컴포넌트들을 빨리 찾을 수 있고, 또한 App.js말고 다른 파일에서도 사용이 가능하다. 2. Component 분리 1) 먼저 src디렉토리에 components라는 디렉토리를 만든다. 2) 디렉토리에 새로운 파일을 만든다. 저번에 만들었던 TOC컴포넌트를 분리하기 위해 TOC.js파일을 만들어 보았다. 3) 컴포넌트를 그대로 붙여넣는다. 빨간줄이 생길텐데 그 이유는 import React, {Component} .. 생활코딩 React 필기 5] React props 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.. 4] React가 없다면? 대단원의 막을 시작해자!! 두둥 그것은 바로바로 컴포넌트를 만드는 것!!야호 배고프다 하하 1. 기본 html public 디렉토리는 npm run start를 했을 때, 파일을 찾는 document root이다. react가 쓰이기 전의 html코드를 짜보자. public폴더에 pure.html이라는 파일을 새로 만들었다. 리액트를 적용하지 않은 기본 html코드와 적용 페이지이다. 조금 더 복잡하게 보이기 위해 시멘틱 태그로 감싸보았다. * 시멘틱 태그 : 기능상의 변화는 없지만, 코드의 구분을 위해 의미록적으로 적는 태그 만약 코드가 천만 줄, 일억 줄이라면 한 눈에 코드가 들어올까? 복잡한 코드를 그대로 보이지 않고, 다른 곳에 숨겨둔 후 메인 페이지를 구성하는 파일에는 이름만 적어주면(사용자 정.. 3] React 앱 deploy하는 법 1. deploy하는 법 페이지 소스에서 아래 부분을 보면 용량이 나와있는데, Hello, World!라는 출력문밖에 없는데 1.7MB인 이유는 개발자를 편하게 하기 위한 기능을 다 넣어두었기 때문이다. 하지만 사용자에게 너무 무거운 파일을 배포할 수 없다. 원래는 npm run start 라는 명령어를 통해 페이지를 열었지만, npm run build 라고 명령어를 입력하면 새로운 build라는 디렉토리가 추가된다. build디렉토리 안에는 우리가 알고 있는 파일들이 있지만, 코드를 확인해보면 공백이 하나도 없다. 이미 가지고 있는 불필요한 정보들을 모두 살균시켰기에 그러한 상태이며, 그래서 용량이 작다. 보안적으로, 또한 심미적으로 좋지 않은 부분을 없앤 후에 index.html을 알아서 처리해주는 .. 2] Create-react-app 샘플 app 수정해보기 1. 디렉토리 디렉토리 구조를 보면 src, public이 있는데, 현재 보이는 페이지는 index.html이라는 파일이며, 이 파일은 public디렉토리 내에 있다. index.html을 보면 id='root'가 있다. 리액트를 통해 컴포넌트들을 만들어 갈 때, id가 root인 곳인 태그 안에 컴포넌트를 넣도록 약속을 해 놓은 것이다. 코드를 확인하면 index.html에는 적혀있지 않지만 리액트를 통해 만든 태그들이 삽입된 것을 확인할 수 있다. 그렇다면 컴포넌트들은 어디서 수정할 수 있을까? 바로 src디렉토리 내에서 수정할 수 있다. 앞으로 리액트로 개발을 하게 되면 src 디렉토리 안에 파일을 만들어 작성할 것이다. 진입 파일은 index.js이고, 이 파일에서 주목해야 할 부분은 빨간색 박스.. 1] React 설치 (윈도우에 create-react-app설치) 1. React facebook.com에서 UI(사용자 인터페이스)를 더 잘 만들기 위해 만든 자바스크립트 UI이다. 웹 사이트는 많아지는 정보에 따라 매우 빠른 속도로 복잡해진다. 정보를 표현하는 html태그들은 점점 복잡해지고, 그에 따라 코드는 더욱 복잡해진다. 2. React의 대략적 모습 수많은 태그로 이루어진 웹페이지 파일(main.html)이 있고, 이 코드는 top, body, bottom으로 나뉘어져있다고 가정해보자. 그렇다면 React는 간단히 말해서, top을 이루는 태그들을 따로 빼서 top.html이라는 파일을 만들고, 메인을 이루는 main.html에서 분리된 top을 불러 지금까지 몇 십줄이었던 top을 이루는 코드 대신에 이라는 사용자 정의 태그를 사용하는 것이다. 이렇게 사.. 이전 1 2 3 다음
