서근 개발노트

티스토리에 팔로잉

FRONT-END/ReactJS Clone project

[노마드/ReactJS 영화 웹 만들기] - Ch02 | 6. 컴포넌트 사용

서근

2년 전

QUOTE THE DAY

“ 일이 재미있으면 인생은 낙원이다. 일이 의무라면 인생은 지옥이다. ”

- Gorky (고리키)

목차 

컴포넌트 생성 방법

[노마드/ReactJS 영화 웹 만들기] - Ch02 | 6. 컴포넌트 사용

JSX에서 컴포넌트 사용

이전에 만들었던 container 부분도 JSX를 사용하여 변경해 보고, Title과 NewBtn을 컴포넌트 형식으로 변경해 웹에 뿌려보도록 하자.

컴포넌트 생성 방법

우리가 만든 컴포넌트를 사용하기 위해서는 반드시 Uppercase로 작성되었어야 했다. 그리고 이 컴포넌트를 Arrow function을 사용해 함수로 만들어 주면, 사용할 수 있는 컴포넌트로 바뀌게 된다.

javascript

UNFOLDED

 //Title에 arrow function을 사용해 함수로 변경해줌!
const Title = () => (
    <h3 id="main-title" onMouseOver={() => console.log('타이틀에 마우스가 감지 되었습니다.')}>
        안녕하세요
    </h3>
);
const NewBtn = () => (
    <button id="new-btn" onClick={() => console.log('클릭 되었습니다.')} style={{ border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' }}>
        클릭
    </button>
);

이제 Container 안에 우리가 만든 컴포넌트를 적용하면 되는데, <img /> 처럼 JSX에서 똑같이 사용해 주면 된다.

< /> 는 우리가 만든 컴포넌트를 복사 붙여 넣기 한다는 의미로 만약 만든 컴포넌트가 lowerCase라면 Babel은 HTML 태그라고 착각하고 오류를 띄우게 되니 반드시 UpperCase로 작성해줘야 한다.

javascript

UNFOLDED

 /* container 부분도 JSX 방식으로 불러와보자! */
//const container = React.createElement('div', null, [Title, NewBtn]);
 
/*
JSX에서 Title과 같은 태그를 가져오기 위해서는 해당 변수를 함수로 변경해줘야 한다.
= () => ( ); 는 function Btn() { return ( ); } 와 같음
 
const Title = ( ... ); ➜
const Title = () => ( ... );
*/
 
const Container = () => (
    // < /> 는 우리가 만든 컴포넌트를 복사 붙혀넣기 한다는 의미!
    // 우리가 만든 컴포넌트는 반드시 UpperCase로 해줘야 한다.
    // lowerCase로하면 웹은 HTML 태그라고 착각함
    <div>
        <button>테스트 버튼</button>
        <Title />
        <NewBtn />
    </div>
);
 
 ReactDOM.render(<Container />, root);

전체코드

html

UNFOLDED

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <!--Babel 스크립트-->
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
    <!--ReactJS 구현부-->
 
    <script type="text/babel">
        //type="text/babel" 을 넣어줘야 JSX로 작성된 코드를 브라우저가 이해할 수 있다.
        const root = document.getElementById('root');
 
        //Title에 arrow function을 사용해 함수로 변경해줌!
        const Title = () => (
            <h3 id="main-title" onMouseOver={() => console.log('타이틀에 마우스가 감지 되었습니다.')}>
                안녕하세요
            </h3>
        );
        const NewBtn = () => (
            <button id="new-btn" onClick={() => console.log('클릭 되었습니다.')} style={{ border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' }}>
                클릭
            </button>
        );
 
        /* container 부분도 JSX 방식으로 불러와보자! */
        //const container = React.createElement('div', null, [Title, NewBtn]);
 
        /*
        JSX에서 Title과 같은 태그를 가져오기 위해서는 해당 변수를 함수로 변경해줘야 한다.
        = () => ( ); 는 function Btn() { return ( ); } 와 같음
 
        const Title = ( ... ); ➜
        const Title = () => ( ... );
        */
 
        const Container = () => (
            // < /> 는 우리가 만든 컴포넌트를 복사 붙혀넣기 한다는 의미!
            // 우리가 만든 컴포넌트는 반드시 UpperCase로 해줘야 한다.
            // lowerCase로하면 웹은 HTML 태그라고 착각함
            <div>
                <button>테스트 버튼</button>
                <Title />
                <NewBtn />
            </div>
        );
 
         ReactDOM.render(<Container />, root);
    </script>
</html>

잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

이 글이 좋으셨다면 구독 & 좋아요

구독과 좋아요를 눌러주시면 저에게 큰 힘이됩니다.

저작자표시 비영리 변경금지

'FRONT-END > ReactJS Clone project' 카테고리의 다른 글

[노마드/ReactJS 영화 웹 만들기] - Ch03 \| 1~2. setState (0)	2023.01.26
[노마드/ReactJS 영화 웹 만들기] - Ch03 \| 0. State? (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 5. JSX 사용법 (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 3. Events in React (1)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 2. 리액트 설정 및 기초 (0)	2023.01.15

누락되었거나 수정해야 할 부분은 이곳으로 메일 부탁드립니다.😃

Written by

SEOGUN

안녕하세요! 저는 프론트엔드 를 위주로 개발을 하는 개발자 입니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.

'FRONT-END/ReactJS Clone project' 카테고리의 관련 포스팅

티스토리 댓글

깃허브 댓글

서근 개발노트 Front-end Developer. 새내기 개발자 입니다.

서근

위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[노마드/ReactJS 영화 웹 만들기] - Ch02 | 6. 컴포넌트 사용

JSX에서 컴포넌트 사용

컴포넌트 생성 방법

'FRONT-END > ReactJS Clone project' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	//Title에 arrow function을 사용해 함수로 변경해줌!
	const Title = () => (
	<h3 id="main-title" onMouseOver={() => console.log('타이틀에 마우스가 감지 되었습니다.')}>
	안녕하세요
	</h3>
	);
	const NewBtn = () => (
	<button id="new-btn" onClick={() => console.log('클릭 되었습니다.')} style={{ border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' }}>
	클릭
	</button>
	);

	/* container 부분도 JSX 방식으로 불러와보자! */
	//const container = React.createElement('div', null, [Title, NewBtn]);

	/*
	JSX에서 Title과 같은 태그를 가져오기 위해서는 해당 변수를 함수로 변경해줘야 한다.
	= () => ( ); 는 function Btn() { return ( ); } 와 같음

	const Title = ( ... ); ➜
	const Title = () => ( ... );
	*/

	const Container = () => (
	// < /> 는 우리가 만든 컴포넌트를 복사 붙혀넣기 한다는 의미!
	// 우리가 만든 컴포넌트는 반드시 UpperCase로 해줘야 한다.
	// lowerCase로하면 웹은 HTML 태그라고 착각함
	<div>
	<button>테스트 버튼</button>
	<Title />
	<NewBtn />
	</div>
	);

	ReactDOM.render(<Container />, root);

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
	<!--Babel 스크립트-->
	<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

	<!--ReactJS 구현부-->

	<script type="text/babel">
	//type="text/babel" 을 넣어줘야 JSX로 작성된 코드를 브라우저가 이해할 수 있다.
	const root = document.getElementById('root');

	//Title에 arrow function을 사용해 함수로 변경해줌!
	const Title = () => (
	<h3 id="main-title" onMouseOver={() => console.log('타이틀에 마우스가 감지 되었습니다.')}>
	안녕하세요
	</h3>
	);
	const NewBtn = () => (
	<button id="new-btn" onClick={() => console.log('클릭 되었습니다.')} style={{ border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' }}>
	클릭
	</button>
	);

	/* container 부분도 JSX 방식으로 불러와보자! */
	//const container = React.createElement('div', null, [Title, NewBtn]);

	/*
	JSX에서 Title과 같은 태그를 가져오기 위해서는 해당 변수를 함수로 변경해줘야 한다.
	= () => ( ); 는 function Btn() { return ( ); } 와 같음

	const Title = ( ... ); ➜
	const Title = () => ( ... );
	*/

	const Container = () => (
	// < /> 는 우리가 만든 컴포넌트를 복사 붙혀넣기 한다는 의미!
	// 우리가 만든 컴포넌트는 반드시 UpperCase로 해줘야 한다.
	// lowerCase로하면 웹은 HTML 태그라고 착각함
	<div>
	<button>테스트 버튼</button>
	<Title />
	<NewBtn />
	</div>
	);

	ReactDOM.render(<Container />, root);
	</script>
	</html>

Apr
일	월	화	수	목	금	토
		1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1

[노마드/ReactJS 영화 웹 만들기] - Ch02 | 6. 컴포넌트 사용

JSX에서 컴포넌트 사용

컴포넌트 생성 방법

'FRONT-END > ReactJS Clone project' 카테고리의 다른 글

[노마드/ReactJS 영화 웹 만들기] - Ch03 | 1~2. setState

[노마드/ReactJS 영화 웹 만들기] - Ch03 | 0. State?

[노마드/ReactJS 영화 웹 만들기] - Ch02 | 5. JSX 사용법

[노마드/ReactJS 영화 웹 만들기] - Ch02 | 3. Events in React

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

컴포넌트 생성 방법