분류 전체보기 (47) 썸네일형 리스트형 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 props와 state props? props란 리액트 컴포넌트의 속성을 정의하는 개념이다. 컴포넌트 내부에 마치 python의 format 문법처럼 {name}과 같이 명시하고, App 컴포넌트에서 props를 지정하여 속성 값을 변경할 수 있다. HTML 태그의 Attribute와 같은 개념이라고 보면 쉽다. state state는 props와 비슷하지만, 데이터를 은닉하고 싶을 때 사용한다. props로 컴포넌트의 속성을 정의할 경우 클라이언트에서 이를 쉽게 변조하거나 열람할 수 있다. 해당 컴포넌트가 단순히 사용자에게 보여지는 용도라면 상관이 없지만, Database나 다른 중요한 데이터에 대한 핸들링이라면 이를 데이터 은닉화할 필요가 있다. 때문에 리액트에서는 state라는 개념을 도입하여 클라이언트가 볼 수 없는 A.. #3 앱 빌드 앱을 빌드하는 방법은 매우 간단하다. 일단 개발을 최종적으로 마치고 npm start를 이용해 디버깅을 진행한다. 최종적으로 배포할 준비가 끝났다고 생각이 들면 build 명령을 통해 앱을 빌드할 것이다. npm run build build 명령을 사용하면 개발 환경으로 잡은 폴더에 build가 생긴다. 리액트는 DOM을 렌더링하는데 초점이 맞춰진 라이브러리이기 때문에 사용자에게 서비스를 제공할 때 무거운 소스코드를 제공해서는 안된다(개발자가 작성하는 소스와 실제 클라이언트가 보게될 화면의 용량 차이가 큼) 때문에 우리는 개발을 마쳤을 때 build 함으로써 필요없는 리소스들(띄어쓰기 등)을 최소한으로 줄이고 사용자에게 배포될 준비가 되게된다. npm install serve && npx serve -s.. #2 리액트 앱의 기본 구조 create-react-app을 이용하여 개발 환경을 세팅했다면 리액트 애플리케이션의 가장 기본적인 구조를 살펴볼 수 있다. 처음 만들었다면 node_modules, public, src 폴더가 있을 것이고 빌드를 한번이라도 했다면 build 폴더도 있을 것이다. node_modules node.js 모듈이 들어있다. 정확히는 모르겠지만 react를 설계할 때 node.js를 어느정도 베이스를 두고 만든 것 같다. 참고로 react는 javascript 라이브러리이다. 아직 초보자 단계에서는 건들 것이 없으며, 개발에 그닥 큰 영향을 끼치는 것도 아니니 그냥 넘어가자. public public 디렉토리를 살펴보면 여러가지 잡다한 것들이 많이 들어있지만 이 중 가장 중요한 것은 index.html 이다. .. #1 개발환경 세팅 Node.js 다운로드 리액트는 npm이라는 node.js 기반의 패키지 관리 소프트웨어를 통해 다운로드 받을 수 있다. 공식 홈페이지로 들어가면 좌측은 안정화 된 버전(LTS), 우측은 최신 버전인데 안정화된 버전을 다운 받는 것을 추천한다. npm install create-react-app npm은 리액트 개발 환경을 바로 구축할 수 있도록 create-react-app을 제공한다. npm install 명령을 통해 다운로드 받을 수 있다. 이 때 별개로 npx라는 패키지 관리자도 있는데, 이는 실행시킬 때만 다운로드한 후 종료시 삭제한다. 패키지의 버전을 항상 최신으로 유지할 수 있으며 스토리지를 상당히 적게 먹기 때문에 실무에서 사용하는 것을 추천한다. create-react-app 다운로드가 .. #0 필기 4] React가 없다면? 대단원의 막을 시작해자!! 두둥 그것은 바로바로 컴포넌트를 만드는 것!!야호 배고프다 하하 1. 기본 html public 디렉토리는 npm run start를 했을 때, 파일을 찾는 document root이다. react가 쓰이기 전의 html코드를 짜보자. public폴더에 pure.html이라는 파일을 새로 만들었다. 리액트를 적용하지 않은 기본 html코드와 적용 페이지이다. 조금 더 복잡하게 보이기 위해 시멘틱 태그로 감싸보았다. * 시멘틱 태그 : 기능상의 변화는 없지만, 코드의 구분을 위해 의미록적으로 적는 태그 만약 코드가 천만 줄, 일억 줄이라면 한 눈에 코드가 들어올까? 복잡한 코드를 그대로 보이지 않고, 다른 곳에 숨겨둔 후 메인 페이지를 구성하는 파일에는 이름만 적어주면(사용자 정.. 이전 1 2 3 4 5 다음
