'React' 카테고리의 글 목록 (2 Page)

// TODO : 이미지와 함께 화면에 출력하세요

// TODO : 변수 (title="제목" publisher="출판사"

// TODO : author="작자" stock="재고") 를 만들어서 화면에 출력하세요(useState())

풀이

App.js 부분(부모 컴포넌트)

import A_Comment from "./pages/A_Comment";

import B_Comment_Exam from "./pages/B_Comment_Exam";

function App() {

return (

{/* 자식 컴포넌트 추가 */}

{/* <A_Comment/> */}

<B_Comment_Exam />

</div>

);

}

export default App;

B_Comment_Exam.js 부분 (자식 컴포넌트)

// B_Comment_Exam.js : 자식(연습문제)

// rfce

import React from 'react'

import "../assets/styles.css"

import { useState } from 'react';

// TODO : 이미지와 함께 화면에 출력하세요

// TODO : 변수 (title="제목" publisher="출판사"

// TODO : author="작자" stock="재고") 를 만들어서 화면에 출력하세요(useState())

function B_Comment_Exam() {

// 변수와 함수 정의

// let [변수명, set변수명] = useState("초기값");

let [title, setTitle] = useState("제목");

let [publisher, setPublisher] = useState("출판사");

let [author, setAuthor] = useState("작자");

let [stock, setStock] = useState("재고");

return (

{/* 빈공간 */}

<img

src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"

className="image"

/>

</div>

{

//TODO : 컴포넌트를 작성하세요

//TODO : title = "제목", publisher="작성자", author="저자", stock="재고"

}

<span className="nameText">{title} </span>

<span className="commentText">{publisher} </span>

<span className="commentText">{author} </span>

<span className="commentText">{stock} </span>

</div>

)

}

export default B_Comment_Exam

styles.css

.App {

text-align: center;

font-size: 50px;

}

저작자표시 비영리 변경금지 (새창열림)

'React > 실습' 카테고리의 다른 글

반복문을 활용한 예제(2) (0)	2023.08.31
삼항연산자를 이용한 실습 (0)	2023.08.31
조건문을 활용한 예제 (0)	2023.08.31
반복문을 활용한 예제 (0)	2023.08.31
useState 이용 4가지 변수 넣기 (0)	2023.08.31

// A_Lifecycle.js : 자식 컴포넌트

// 컴포넌트 단축키 : rfce

// TODO: 리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정

import React from 'react'

import { useEffect, useState } from 'react';

// 컴포넌트 : 함수 컴포넌트(클래스 컴포넌트(과거))

// es6 : ECMAscript == 모던자바스크립트

function A_Lifecycle() {

// 변수와 함수를 정의하는 부분

// TODO: 변수 정의 : 바인딩 함수

// TODO: 사용법 : let [변수명, set변수명] = useState("초기값");

// TODO: set변수명() : 수정함수(setter 함수)

let [element, setElement] = useState(true);

// TODO: 함수정의

// TODO: 컴포넌트 생성 함수 : 자동 실행

// TODO: 화면이 뜨자마자 실행됨 : Mount 함수

useEffect(()=>{

// 최초 1번만 화면이 뜰때 실행됨

console.log("mount Call");

}, []);

// TODO: 컴포넌트 수정함수 : 자동실행

// TODO: 변수의 값이 바뀔 때 자동실행됨

useEffect(()=>{

// 최초 1번만 화면이 뜰때 실행됨

console.log("update Call : " + element);

}, [element]); // [element] => 감시 할 변수명

// 화살표 함수 생성 단축어 nfn

// 클릭 함수

const handleClick = () => {

// element = true -> false (값 수정)

setElement(false);

}

return (

// 이러한 구조로 작성 : <div>HTML 태그들...</div>

// 잘못된 구조 : <div>태그1</div><div>태그2</div>

<div>

<h2>This is Lifecycle</h2>

<button onClick={handleClick}>클릭하세요</button>

</div>

)

}

export default A_Lifecycle

저작자표시 비영리 변경금지 (새창열림)

'React > 이론' 카테고리의 다른 글

리액트의 조건문 : 삼항연산자를 사용한 예제 (0)	2023.08.31
map, filter (0)	2023.08.31
CSS 적용 (0)	2023.08.30
JSX 문법 (0)	2023.08.30
Props (0)	2023.08.30

React에서 CSS 적용은 어떻게 할까?

1. 우선 자식 컴포넌트를 생성해줍니다.

2. 자식 컴포넌트 이름과 똑같은 css 파일을 따로 생성해줍니다.

3. css 파일을 자식 컴포넌트에 import 시켜줍니다.

// D_ImportComp.js : 자식컴포넌트

// TODO: 리액트 컴포넌트 디자인 적용하기 : css 파일 적용

// TODO: 1) css 파일 준비해서 import 하면 적용됨

// TODO: 프로젝트가 커질수록 디자인 클래스선택자들이 중첩될 수 있음

// TODO: 예) A 사람 css : .alpha, B 사람 css : .alpha,

// p : 노란색 p : 파란색

// TODO: 2) 공통 디자인 적용 : 태그선택자 등을 자유롭게 코딩

// TODO: 3) 클래스/id 선택자로 디자인 함 : 프로젝트명(dms01-클래스명 ~ dms05-클래스명)

// rfce

import React from 'react'

// css 파일을 만들어서 import

// import "css 파일경로";

import "../assets/D_ImportComp.css";

function D_ImportComp() {

// 변수나 함수 선언하는 곳

// TODO: 화면에 보이는 부분

return (

<div>

{/* CSS 클래스 :class="" // 리액트 => className="" */}

<h2 className="dms01-h2">ImportComp</h2>

</div>

)

}

export default D_ImportComp

/* D_ImportComp.css */

.dms01-h2 {

color: white;

background-color: black;

}

저작자표시 비영리 변경금지 (새창열림)

'React > 이론' 카테고리의 다른 글

map, filter (0)	2023.08.31
리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정 (0)	2023.08.30
JSX 문법 (0)	2023.08.30
Props (0)	2023.08.30
화면 출력 (0)	2023.08.30

JSX는 편리한 문법이지만 올바르게 사용하기 위해 규칙을 따라야 합니다.

요소는 감싸져 있어야 한다.

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.

지난번 hello-react 프로젝트의 src 폴더 안 App.js 파일을 열어보겠습니다.

function App() {

return (

<h1>Hello React!!</h1>

<h2>안녕하세요 주녘입니다.</h2>

);

}

export default App;

이러한 형태의 코드는 작동하지 않습니다. 터미널을 열어 웹 브라우저에서 확인해 볼까요?

이러한 오류는 요소들이 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생한 것입니다.

이러한 오류 수정은 아래 코드와 같이 작성하면 해결됩니다.

function App() {

return (

<div>

<h1>Hello React!!</h1>

<h2>안녕하세요 주녘입니다.</h2>

</div>

);

}

export default App;

요소사이에 <div></div> 태그로 감싸주면 오류가 해결됩니다.

중요한 JSX 규칙 중 하나는 return 이후에는 한 개의 태그로 둘러싸여 있어야 한다는 것입니다.

또는 리액트에서 제공하는 Fragment를 사용할 수 있습니다. Fragment는 두 가지 방법으로 사용가능합니다.

react에서 Fragment를 import 해서 사용하거나 빈 태그로 감싸면 됩니다.

import { Fragment } from "react";

function App() {

return (

<h1>Hello React!!</h1>

<h2>안녕하세요 주녘입니다.</h2>

</fragment>

);

}

export default App;

function App() {

return (

< >

<h1>Hello React!!</h1>

<h2>안녕하세요 주녘입니다.</h2>

</ >

);

}

export default App;

JSX에서의 JS표현

JSX 안에서 자바스크립트 표현식을 사용할 수 있습니다. JSX 내부에서 코드를 { }로 감싸면 됩니다.

function App() {

// 변수와 함수를 선언하는 곳

const name = "주녘";

return (

<div>

<h1>Hello {name}!!</h1>

<h2>안녕하세요 {name}입니다.</h2>

</div>

);

}

export default App;

JSX에서 if문을 쓰고 싶다면? - 조건부 연산자를 활용!

JSX 내부에서 자바스크립트 표현식에서 if문을 사용할 수 없습니다.

if문을 사용하기 위해서는 JSX 밖에서 if문을 사용하여 값을 미리 설정하거나 JSX 내부에서 { } 안에 조건부 연산자를 사용하면 됩니다. 우리가 알고있는 삼항 연산자를 생각하면 됩니다.

function App() {

// 변수와 함수를 선언하는 곳

const name = "주녘";

return (

<div>

{name === "주녘" ? <h1>주녘입니다.</h1> : <h2>주녘이가 아닙니다.</h2>}

</div>

);

}

export default App;

위와 같이 실행하면 결과화면이 주녘입니다. 라고 뜨겠죠?

만약 name의 값이 주녘이 아닌 철수이면 어떻게 될까요? 값을 변경해봅시다.

function App() {

// 변수와 함수를 선언하는 곳

const name = "철수";

return (

<div>

{name === "주녘" ? <h1>주녘입니다.</h1> : <h2>주녘이가 아닙니다.</h2>}

</div>

);

}

export default App;

저작자표시 비영리 변경금지 (새창열림)

'React > 이론' 카테고리의 다른 글

리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정 (0)	2023.08.30
CSS 적용 (0)	2023.08.30
Props (0)	2023.08.30
화면 출력 (0)	2023.08.30
Hello! React (0)	2023.08.30

props?

props는 "properties"를 줄인 표현어로 컴포넌트 속성을 설정할 때 사용하는 요소라고 합니다.

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.

JXS에서 props 렌더링

우선 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name 이라는 props를 렌더링하도록 설정해봅시다.

function MyComponent(props) {

return (

<div>

안녕하세요, 저는 {props.name} 입니다.

</div>

)

}

export default MyComponent

부모 컴포넌트에서 props값 지정하기

부모 컴포넌트인 App.js 에서 MyComponent의 props 값을 지정해봅시다.

import "./App.css";

import MyComponent from "./pages/MyComponent";

function App() {

return (

<div>

<MyComponent name="주녘"></MyComponent> // name ="주녘" 을 추가하였습니다.

</div>

);

}

export default App;

props 기본값 설정 : defaultProps

부모 컴포넌트에서 작성한 name 값을 지우고 저장해봅시다.

현재 name에 값을 지정하지 않았기 때문에 안녕하세요, 저는 입니다. 라고 보이게 됩니다.

이처럼 props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정하는 defalutProps을 알아봅시다.

// MyComponent.js

import React from 'react'

const MyComponent = props => {

return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>

}

MyComponent.defaultProps = {

};

export default MyComponent

태그 사이의 내용을 보여주는 children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 있습니다.

바로 children 입니다.

부모 컴포넌트인 App.js 파일을 수정해봅시다.

import "./App.css";

import MyComponent from "./pages/MyComponent";

function App() {

return (

<div>

</div>

);

}

export default App;

위의 코드에서 <MyComponent>리액트</MyComponent> 태그 사이에 작성한 "리액트"라는 문자열을 MyComponent 내부에서 보여주려면 props.children 값을 보여주어야 합니다.

자식 컴포넌트인 MyComponent.js를 수정해봅시다

// MyComponent.js

import React from 'react'

const MyComponent = props => {

return <div>

안녕하세요, 제 이름은 {props.name}입니다.

children 값은 {props.children} 입니다.

</div>

}

MyComponent.defaultProps = {

};

export default MyComponent

비구조화 할당 문법을 사용하여 props 내부 값 추출해보기

props 값을 조회할 때마다 props.name, props.children과 같이 props. 이라는 키워드를 앞에 붙여 사용하고 있습니다.

조금더 편리하게 사용하기 위해 비구조화 문법을 사용하여 내부 값을 바로 추출하는 방법을 알아보겠습니다. 😊

// MyComponent.js

import React from 'react'

const MyComponent = props => {

const {name, children} = props;

return <div>

안녕하세요, 제 이름은 {name}입니다.

children 값은 {children} 입니다.

</div>

}

MyComponent.defaultProps = {

};

export default MyComponent

// MyComponent.js

import React from 'react'

const MyComponent = ({name, children}) => {

return <div>

안녕하세요, 제 이름은 {name}입니다.

children 값은 {children} 입니다.

</div>

}

MyComponent.defaultProps = {

};

export default MyComponent

조금 더 간단해진것을 볼 수 있습니다.

propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용합니다.

컴포넌트의 propTypes를 지정하는 방법은 위 쪽의 defaultProp을 설정하는 것과 비슷합니다.

propTypes 를 사용하기 위해서는 상단에 import 구문을 사용하여 불러와야 합니다.

// MyComponent.js

import PropType from 'prop-types'; // PropType import

const MyComponent = ({ name, children }) => {

return (

(... 이하생략)

);

};

MyComponent.defaultProps = {

}

MyComponent.propType = {

name:PropType.string // name 값을 문자열 형태로만 전달해야함!

}

export default MyComponent;

이런식으로 설정을 해주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미합니다.

App.js에서 name이 문자열이 아닌 다른 값으로 전달한다면 어떻게 될까요?

import './App.css';

import MyComponent from './pages/MyComponent';

const App = () => {

return <MyComponent name={10}>리액트</MyComponent> // name 값을 숫자 10으로 전달해보았습니다.

}

MyComponent.defaultProps = {

};

export default App;

값은 나타나기는 했지만, 콘솔에 경고창이 뜨는 것을 확인할 수 있습니다.

오류 메시지를 확인했으면 name 값을 제대로 설정해주시면 됩니다.

isRequired를 사용하여 필수 propTypes 설정

propTypes를 지정하지 않았을 때 경고메시지를 띄워주는 작업을 해봅시다.

propTypes를 지정할 때 뒤에 isRequired를 붙여주면 끝입니다!

favoriteFruit 라는 문자열을 필수 props로 지정해보겠습니다.

// MyComponent.js

import PropTypes from 'prop-types';

const MyComponent = ({ name, favoriteFruit, children }) => { // favoriteFruit 추가

return (

<div>

안녕하세요, 제 이름은 {name}입니다.

<br />

children 값은 {children}

입니다.

<br/>

제가 좋아하는 과일은 {favoriteFruit}입니다.

</div>

);

};

MyComponent.defaultProps = {

}

MyComponent.propTypes = {

favoriteFruit: PropTypes.string.isRequired // 문자열 입력받게

};

export default MyComponent;

만약 favoriteFruit 를 지정하지 않았으면 어떻게 될까요?

favoriteFruit proptype를 입력하라고 경고창이 뜨는 것을 볼 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

'React > 이론' 카테고리의 다른 글

리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정 (0)	2023.08.30
CSS 적용 (0)	2023.08.30
JSX 문법 (0)	2023.08.30
화면 출력 (0)	2023.08.30
Hello! React (0)	2023.08.30

들어가기 전에

컴포넌트 파일에서 웹브라우저 화면에 표시되는 영역은 함수의 return 값 아래 부분에 작성해주어야 화면에 정상적으로 출력이 됩니다.

function Home() {

// TODO: 변수를 정의하는 곳 : 여기

let array = ["a", "b", "c"]; // 일반 변수

// 리액트 특징 : 변수값 + html 태그를 같이 사용이 가능함(JSX 표현식)

let input = <b>문자열 출력되나요?</b>;

// TODO: 함수를 정의하는 곳 : 여기

// 함수선언식 : function 함수명() {}

// 함수표현식 : let 함수명 function (){};

// 화살표함수 : let 함수명 () => {}

// 화살표함수 단축키 : nfn

const testFunc = () => {

return "함수입니다";

}

// 클릭이벤트 함수

const myClick = () => {

alert("클릭했어요");

}

// TODO: HTML 태그 + JSX 표현식{} : return 안에 코딩함

// TODO: return : 웹브라우저 화면에 표시되는 영역

return (

<div>

.....이곳에 작성!

</div>

)

}

export default Home

화면에 출력이 가능한 것들

{/* TODO: 문자열 출력 : OK */}

{/* 사용법 : {"문자열"} */}

{"문자열 출력되나요!!!"}

<br/>

{/* TODO: 변수에 저장된 html태그 + 문자열 출력 : OK */}

{/* 사용법 : {변수명} */}

{input}

<br/>

{/* TODO: html 태그 : OK */}

{<b>이것도 출력될까요?</b>}

<br/>

{/* TODO: 숫자출력 : OK */}

{1}

<br/>

{1 * 2 + 3 - 2}

<br/>

{/* TODO: 문자열 붙이기 : + : OK */}

{"abc" + "가나다"}

<br/>

{/* TODO: JSX 표현식 : {<태그>{문자열}</태그>} : OK */}

{<b>{"안녕하세요"}</b>}

<br/>

{/* TODO: 배열 출력 : OK */}

{["가", "나", "다"]}

<br/>

{[1,2,3]}

<br/>

{array}

<br/>

{/* TODO: 함수 출력 : OK */}

{/* 함수의 사용 : 함수명() */}

{testFunc() + " 이것도 될까요?"}

<br/>

{/* TODO: 3항 연산자 : 조건식(축약형) : OK */}

{/* 사용법 : (조건식==true)? 참:거짓; */}

{true? "true":"false"}

<br/>

{false? "true":"false"}

<br/>

{/* TODO: HTML 태그 속성의 값으로 {} 넣어보기 : OK */}

<br/>

<button onClick={myClick}>클릭하세요</button>

<br/>

{/* TODO: 자바스크립트 내장함수 : OK */}

{console.log("이것도 출력될까요?")}

<br/>

{/* 오늘 요일(1 ~ 7) new Date() */}

{new Date().getDay()}

<br/>

{new Date().getFullYear() + "년"}

<br/>

{(new Date().getMonth()+1) + "월"}

<br/>

화면에 출력하지 못하는 것들

아래의 내용들은 중괄호{ } 안에 입력하여도 화면에 출력이 안되며 오류가 발생합니다.

{/* 화면에 출력 안되는 것 */}

{/* ------------------------------------------------------ */}

{/* TODO: boolean : 참/거짓 */}

{/* 해결책 : 참/거짓을 문자열로 변경하여 출력 */}

{true}

<br/>

{/* TODO: 객체 출력, 에러 발생*/}

{/* 해결책 : 객체 -> 문자열로 변경해서 출력 */}

{/* {{name:"홍길동", email:"hong@naver.com"}} */}

<br/>

{/* TODO: 조건문 if, 에러 발생 */}

{/* 해결책 : 삼항연산자 사용 */}

{/* {if(true){return "true"}} */}

{/* TODO: 반복문 for, 에러 발생 */}

{/* 해결책 : map() 함수 가능 */}

{/* {for(let i = 1; i<2 i++){console.log("aaaa")}} */}

저작자표시 비영리 변경금지 (새창열림)

'React > 이론' 카테고리의 다른 글

리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정 (0)	2023.08.30
CSS 적용 (0)	2023.08.30
JSX 문법 (0)	2023.08.30
Props (0)	2023.08.30
Hello! React (0)	2023.08.30

React를 시작하기 전에!

React를 시작하기 전에 작업 환경 설정을 해주어야 합니다.

순서는 다음과 같습니다.

Node.js / npm 설치 -> vs code에서 create-react-app 으로 프로젝트 만들기

Node.js 설치해보기

1) Node.js 설치

리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 합니다.

이것으로 웹 브라우저 환경이 아닌 곳에서 자바스크립트를 사용하여 연산할 수 있게 만들어줍니다.

Node.js 홈페이지에서 LTS 버전을 다운받아 설치해주면됩니다.

npm install 하기

2) npm 설치하기

Node.js를 설치하셨다면 npm을 설치해봅시다.

npm은 Node.js 패키지 매니저 도구입니다.

VS Code에서 터미널을 실행시키고 다음과 같이 명령어를 입력해줍니다.

프로젝트 생성하기

3) 프로젝트 생성하기

npm을 인스톨 하였으면 이제 프로젝트를 생성해봅시다.

터미널 명령창에 npx create-react-app hello-react 명령어를 입력해봅시다.

프로젝트 생성이 완료가 되면 아래와 같은 화면이 나옵니다.

We suggest that you begin by typing:

아래 부분을 보시면 명령어가 보이는데요, 이 명령어를 따라 치시면 리액트 프로젝트 화면이 실행됩니다.

저작자표시 비영리 변경금지 (새창열림)

'React > 이론' 카테고리의 다른 글

리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정 (0)	2023.08.30
CSS 적용 (0)	2023.08.30
JSX 문법 (0)	2023.08.30
Props (0)	2023.08.30
화면 출력 (0)	2023.08.30

Just Do IT

React

useState 함수를 이용한 Comment 출력

풀이

'React > 실습' 카테고리의 다른 글

리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정

'React > 이론' 카테고리의 다른 글

CSS 적용

React에서 CSS 적용은 어떻게 할까?

'React > 이론' 카테고리의 다른 글

JSX 문법

요소는 감싸져 있어야 한다.

JSX에서의 JS표현

JSX에서 if문을 쓰고 싶다면? - 조건부 연산자를 활용!

'React > 이론' 카테고리의 다른 글

Props

props?

JXS에서 props 렌더링

부모 컴포넌트에서 props값 지정하기

props 기본값 설정 : defaultProps

태그 사이의 내용을 보여주는 children

비구조화 할당 문법을 사용하여 props 내부 값 추출해보기

propTypes를 통한 props 검증

isRequired를 사용하여 필수 propTypes 설정

'React > 이론' 카테고리의 다른 글

화면 출력

들어가기 전에

화면에 출력이 가능한 것들

화면에 출력하지 못하는 것들

'React > 이론' 카테고리의 다른 글

Hello! React

React를 시작하기 전에!

Node.js 설치해보기

npm install 하기

프로젝트 생성하기

'React > 이론' 카테고리의 다른 글

+ Recent posts

티스토리툴바