웹브라우저에 노출되는것 : public
코딩 하는 부분 : src
이전 버전에서는 APP.js 페이지 상단에 import React from 'react' 문장이 있었음
- import React from 'react'; // 리액트를 불러와서 사용할 수 있게 한다.
리액트 프로젝트를 만들 때 node_modules 폴더에 리액트 모듈이 설치된다.
※이렇게 리액트 모듈을 불러와서 설치하는 것은 브라우저 환경이 아닌 곳에서 자바스크립트를 실행할 수 있도록 하는 'Node.js의 기능'을 지원하기 위해서이다.
리액트 모듈을 불러 모을 때 사용하는 것이 번들러(bundler) 이다.
불러온 모듈은 모두 합쳐 하나의 파일(=자바스크림트 파일)로 생성한다.
(대표적인) 번들러는 웹팩(WebPack), 파슬(Parcel), 브라우저러파이(Browserify)라는 도구들이 있으며,
리액트 프로젝트에서는 웹팩을 사용한다.
웹팩은 SVG 파일(=이미지파일), CSS 파일을 불러와서 사용할 수 있게 한다. 웹팩의 로더(loader)(라는 기능이)가 담당한다.
CSS 파일을 가지고(불러) 오는 것은 'CSS-loader', 웹 폰트 or 미디어 파일을 가지고(불러) 오는 것은 'FILE-loader',
자바스크립트 파일을 불러오는 것은 'BABEL-loader' 라고 한다.
- import logo from './logo.svg';
- import './App.css';
컴포넌트를 랜더링하면 함수에서 반환하는 내용이 웹 브라우저에 보이게된다.
- function App() { }
1. JSX(JavaScript XML) 은 부모 요소 하나로 감싸야한다.
2. 반드시 부모 요소를 div로 사용할 필요는 없고, <Fragment ></Fragment><> </>를 사용할 수 있다.
3. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 된다.
리액트 컴포넌트에서 undefined (정의되지 않은) 오류가 많이 발생한다.
undefined는 브라우저에 표현되지 않지만 만약 undefined 를 브라우저에서 표현하고 싶으면 {number || 'undefined '} 형식을 사용한다.
인라인 스타일 시트 적용할 때 객체 형태로 넣는다.
스타일 속성을 지정할 때는 '카멜 표기법 (camelCase)'으로 작성한다.
ex) 'background-color'는 'backgroundClolr'로 작성한다.
프랍스(props)는 properties(속성)의 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용한다.
부모 컴포넌트에서 속성(과 속성값)을 설정한다. 자식 컴포넌트에서 (속성과)속성값을 전달 받는다.
// src - APP.js
import React from 'react'; // 리액트를 불러와서 사용할 수 있게 한다.
/*
리액트 프로젝트를 만들 때 node_modules 폴더에 리액트 모듈이 설치된다.
※이렇게 리액트 모듈을 불러와서 설치하는 것은 브라우저 환경이 아닌 곳에서 자바스크립트를 실행할 수 있도록 하는 'Node.js의 기능'을 지원하기 위해서이다.
리액트 모듈을 불러 모을 때 사용하는 것이 번들러(bundler) 이다.
불러온 모듈은 모두 합쳐 하나의 파일(=자바스크림트 파일)로 생성한다.
(대표적인) 번들러는 웹팩(WebPack), 파슬(Parcel), 브라우저러파이(Browserify)라는 도구들이 있으며, 리액트 프로젝트에서는 웹팩을 사용한다.
*/
import logo from './logo.svg';
import './App.css';
/*
웹팩은 SVG 파일 (=이미지 파일), CSS 파일을 불러와서 사용할 수 있게 한다. 웹팩의 로더(loader)(라는 기능이)가 담당한다.
CSS 파일을 가지고(불러) 오는 것은 'CSS-loader', 웹 폰트 or 미디어 파일을 가지고(불러) 오는 것은 'FILE-loader', 자바스크립트 파일을 불러오는 것은 'BABEL-loader' 라고 한다.
리액트 컴포넌트에서 undefined (정의되지 않은) 오류가 많이 발생한다.
undefined는 브라우저에 표현되지 않지만 만약 undefined 를 브라우저에서 표현하고 싶으면 {number || 'undefined '} 형식을 사용한다.
인라인 스타일 시트 적용할 때 객체 형태로 넣는다.
스타일 속성을 지정할 때는 '카멜 표기법 (camelCase)'으로 작성한다. (예를 들어 'background-color'는 'backgroundClolr'로 작성한다.)
*/
function App() { //함수형 컴포넌트 App을 만든다. 컴포넌트를 랜더링하면 함수에서 반환하는 내용이 웹 브라우저에 보이게된다.
// 1. JSX(JavaScript XML) 은 부모 요소 하나로 감싸야한다.
// 2. 반드시 부모 요소를 div로 사용할 필요는 없고, <Fragment ></Fragment><> </>를 사용할 수 있다.
const name = "리액트"// 상수(constance), 컨스트
let variable// 변수, 렛
const number = undefined;
const style = { // 상수명 변경하고 싶으면 자바스크립트에도 변경하면된다.
padding:30, // 단위를 생략하면 기본값은 px로 지정된다.
fontSize:'42px', // 단위를 넣게되면 문자열로 ''를 사용한다.
color:'green',
backgroundColor:'gray'
};
// 3. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 된다.
return (
<>
<h2 style={ style }>{ name } 안녕! </h2>
{ name === '자바스크립트' ? (<h3>리액트 입니다./ </h3>) :
(<h3> 리액트가 아닙니다.</h3>) }
HELLO <strong style={{ fontSize:'32px' , color:'pink'}}>React</strong> {/* style={{}} 상수를 선언하지 않고 넣는방법 , {}괄호를 두번쓴다.*/}
<h4 className="title"> { number || '변수가 정의 되지 않았다.' } </h4> {/*undefined 값을 보여주고 싶을 때 사용한다.*/}
{/*className 대신 그냥 class로 써도 되긴됨 */}
</>
);
}
export default App;
// src - APP.css
( <h4 className="title"> 을 선언하고 APP.css 로 와서 스타일을 지정해준다.> )
( 마지막 행 .title 이다. )
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.title {font-size:32px; color:#F20;}
처음 js 파일을 생성할 때 함수형 컴포넌트는 아래와 같이 작성한다.
※함수형 컴포넌트는 바로 JSX를 사용하면 된다.
// src - Box.js
// 함수형 컴포넌트
import React from 'react';
import './App.css';
function Box() { // function 컴포넌트 이름
// 상수를 선언 한다.
const name = "React";
return <div>{ name }</div> // React 라는 이름을 실행한다.
// 포함을 안시켜서 웹 브라우저에 출력은 안되는 상태이다.
}
export default Box;
클래스형 컴포넌트 는 아래와 같이 작성한다.
위에 만든 함수를 컴포넌트 함수로 작성하는 방법이다.
- 클래스형은 render 함수가 한번 더 들어간다.
// src - Box.js
/* // 함수형 컴포넌트
import React from 'react';
import './App.css';
function Box() { // function 컴포넌트 이름
// 상수를 선언 한다.
const name = "React";
return <div>{ name }</div> // React 라는 이름을 실행한다.
// 포함을 안시켜서 웹 브라우저에 출력은 안되는 상태이다.
}
-> box 내부에는 JSX 를 사용한다.
export default Box;
*/
import React, {Component} from 'react'; // 리액트를 사용하겠다는 뜻
class Box extends Component {
render() {
const name = 'React';
return <div>{ name }</div> // JSX 를 넣는다.
}
}
// -> box 내부에는 render 함수를 사용한다.
export default Box;
=> 함수형 컴포넌트 사용을 더 권장한다.
컴포넌트 함수 생성해보기
1. src > components 폴더 생성
2. src > components > MyComponent 파일 생성
3. 코드 작성
// src - components - MyComponent.js
import React from 'react';
// 모듈(컴포넌트)을 포함할때 사용한다.
// MyComponent : 현재 만드려고 하는 컴포넌트 함수 이름이다.
const MyComponent = () => { // () => {} 는 ES6(ECMA Script 6) 에서 사용하는 화살표 함수이다.
return <div> 새롭고 멋진 리액트 컴포넌트 </div>
};
export default MyComponent;
// Mycomponent 를 기본으로 내보내겠다는 뜻
// 모듈(컴포넌트)을 내보낼때 사용한다.
※추가 설명
const MyComponent = 에서 '='은 대입 연산자이다. (Mycomponent라는 변수에 = 이후의 함수를 담아 호출한다.)
제이쿼리에서는 var function = function() {}; 과 같다.
function() {}; 이 사용하기 싫어서 = () => 로 변경한것이다.
src - APP.js 의 함수도 ES6를 적용해 변경할 수 있다.
// src-APP.js
function App() { }
/*
function APP() {} 은 아래와 같이 변경이 가능하다.
const App = () => {}
*/
src-APP.js 에
// src-APP.js MyComponent.js 에 생성한 모듈을 불러온다.
// 3. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 된다.
return (
<div>
<MyComponent /> {/*모듈(컴포넌트) 불러오기 : APP 컴포넌트에서 MyComponent 컴포넌트를 불러와서 브라우저에 보이게 한다.*/}
<h2 style={ style }>{ name } 안녕! </h2>
{ name === '자바스크립트' ? (<h3>리액트 입니다./ </h3>) :
(<h3> 리액트가 아닙니다.</h3>) }
HELLO <strong style={{ fontSize:'32px' , color:'pink'}}>React</strong> {/* style={{}} 상수를 선언하지 않고 넣는방법 , {}괄호를 두번쓴다.*/}
<h4 className="title"> { number || '변수가 정의 되지 않았다.' } </h4> {/*undefined 값을 보여주고 싶을 때 사용한다.*/}
{/*className 대신 그냥 class로 써도 되긴됨 */}
</div>
);
}프랍스(props) 적용한 예제
1. APP.js 에서 props 값을 지정한다.
// src - APP.js
// 3. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 된다.
return (
<div>
<MyComponent name="프랍스" /> {/*모듈(컴포넌트) 불러오기 : APP 컴포넌트에서 MyComponent 컴포넌트를 불러와서 브라우저에 보이게 한다.*/}
<h2 style={ style }>{ name } 안녕! </h2>
{ name === '자바스크립트' ? (<h3>리액트 입니다./ </h3>) :
(<h3> 리액트가 아닙니다.</h3>) }
HELLO <strong style={{ fontSize:'32px' , color:'pink'}}>React</strong> {/* style={{}} 상수를 선언하지 않고 넣는방법 , {}괄호를 두번쓴다.*/}
<h4 className="title"> { number || '변수가 정의 되지 않았다.' } </h4> {/*undefined 값을 보여주고 싶을 때 사용한다.*/}
{/*className 대신 그냥 class로 써도 되긴됨 */}
</div>
);
}2. MyComponent 에서 속성값을 받는다.
// // src - components - MyComponent.js
import React from 'react';
// 모듈(컴포넌트)을 포함할때 사용한다.
// MyComponent : 현재 만드려고 하는 컴포넌트 함수 이름이다.
const MyComponent = (props) => { // () => {} 는 ES6(ECMA Script 6) 에서 사용하는 화살표 함수이다.
return <div> 새롭고 멋진 리액트 컴포넌트, { props.name } 로 속성값을 전달 받는다. </div>
{/* { this.props.name } or { props.name } : 속성명으로 속성값을 가져온다.*/}
{/* this를 쓰지 않으려면 = (props) 를 설정해주면 된다. */}
};
export default MyComponent;
// Mycomponent 를 기본으로 내보내겠다는 뜻
// 모듈(컴포넌트)을 내보낼때 사용한다.
(추가 설명 : APP.js 에서 props 값을 지정하지 않으면 웹브라우저에 노출되지 않는다.)
프랍스를 지정하지 않으면 MyComponent.js 에서 기본값을 지정해준다.
MyComponent.defaultProps = {name : '★Props★'}; // 프랍스 값이 전달 안될 때 기본값을 지정
3. MyComponent 에 여러 행을 넣고 싶을때
- return () 와 같이 괄호를 설정해줘야 여러 행을 넣을 수 있다.
- props 를 여러개 넣어줄 때에 APP.js에서는 두개를 모두 넣을 수 없어
name은 기본값으로 설정 , child 는 프랍스로 전달 시켰다.
// // src - components - MyComponent.js
import React from 'react';
// 모듈(컴포넌트)을 포함할때 사용한다.
// MyComponent : 현재 만드려고 하는 컴포넌트 함수 이름이다.
const MyComponent = (props) => { // () => {} 는 ES6(ECMA Script 6) 에서 사용하는 화살표 함수이다.
return ( // 여러행이 들어갈 때는 () 괄호속에 넣어줘야한다.
<div>
<p>
새롭고 멋진 리액트 컴포넌트, { props.name } 로 속성값을 전달 받는다. {/* 기본값으로 설정된게 노출*/}
{/* { this.props.name } or { props.name } : 속성명으로 속성값을 가져온다. */}
{/* this를 쓰지 않으려면 = (props) 를 설정해주면 된다. */}
</p>
<p>
새롭고 멋진 리액트 컴포넌트, { props.child } 로 속성값을 전달 받는다. {/* 프랍스로 값이 전달되어 노출 */}
</p>
</div>
)
};
MyComponent.defaultProps = {name : '★Props★'}; // 프랍스 값이 전달 안될 때 기본값을 지정
export default MyComponent;
// Mycomponent 를 기본으로 내보내겠다는 뜻
// 모듈(컴포넌트)을 내보낼때 사용한다.// src - APP.js
// 3. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 된다.
return (
<div>
<MyComponent child="프랍스로 전달되는 속성값" /> {/*모듈(컴포넌트) 불러오기 : APP 컴포넌트에서 MyComponent 컴포넌트를 불러와서 브라우저에 보이게 한다.*/}
<h2 style={ style }>{ name } 안녕! </h2>
{ name === '자바스크립트' ? (<h3>리액트 입니다./ </h3>) :
(<h3> 리액트가 아닙니다.</h3>) }
HELLO <strong style={{ fontSize:'32px' , color:'pink'}}>React</strong> {/* style={{}} 상수를 선언하지 않고 넣는방법 , {}괄호를 두번쓴다.*/}
<h4 className="title"> { number || '변수가 정의 되지 않았다.' } </h4> {/*undefined 값을 보여주고 싶을 때 사용한다.*/}
{/*className 대신 그냥 class로 써도 되긴됨 */}
</div>
);
}
'국비지원 JAVA 풀스택 과정 > 리액트' 카테고리의 다른 글
| [리액트] props (0) | 2022.12.07 |
|---|---|
| [리액트] 컴포넌트 만들기 (0) | 2022.12.07 |
| [리액트] 배포하는 법 (0) | 2022.12.07 |
| [리액트] css 코딩하는 법 (0) | 2022.12.07 |
| 리액트 새프로젝트 생성 (0) | 2022.12.07 |