책과 함께] 리액트 동작 원리 및 기초 개념

<참고한 책>

* 책의 모든 내용을 업로드할 수 없기 때문에 간단한 부분만 업로드한 후,

   직접 클론 코딩한 내용은 비공개로 업로드 하겠습니다.

 

 

 

동작 원리 복습

 

리액트는

개발자가 작성/수정한 프로젝트 폴더의 code를 JavaScript를 이용해 해석합니다.

 

 

 

---

 

기초 개념

 

1. App( ) 함수의 반환값이 많아지면?

 

App.js

Function App(){
	return (
    	<div> Hello </div>;
 }


//------------------
// App() 함수의 반환값이 많아지면 소괄호로 감싸기
//
Function App(){
	return (
    	<div>
        	<h1> Hello </h1>
        </div>
    );
 }
 //------------------

 

 

2. 컴포넌트 

 

리액트는 <App/> 같은 표시를 컴포넌트로 인식하고,

컴포넌트가 반환하는 값을 화면에 그립니다.

-> 리액트는 컴포넌트와 함께 동작하고, 리액트 앱은 컴포넌트로 구성됩니다.

App컴포넌트는 create-react-app이 자동으로 만들어주는 컴포넌트.

 

 

3. JSX

 

컴포넌트란?

JavaScript + HTML을 조합한 JSX문법을 사용해 만드는 것.

 

 

 

+) 방법1. 컴포넌트 만들기

 

   ** 반드시 대문자로 파일명 적기

< .src / Example.js >

1. src폴더 내에 Example.js라는 파일 만듭니다.

 

2. import React from 'react';

 

3. function Example( ) 만들기

 

4. export default Example;  ->  다른 파일에서도 Example 컴포넌트 사용가능하도록 선언합니다.

 

 

< .src / index.js >

 

**ReactDOM.render(....)에 <Example/>을 추가하면,

   'JSX expressions must have one parent element'라는 오류가 발생합니다.

   >> 리액트는 최종적으로 단 한 개의 컴포넌트를 그려야 합니다.

        그렇기 때문에 <App/><Example/>,document.getElementById('root')구문이 오류나는 것이죠.

        따라서 Example 컴포넌트를 App 컴포넌트 안에 추가해줍니다.

 

 

 < .src/App.js >

 

1. import Example from './Example';

 

2. function App( )에

  <div> </div> 사이에 <Example/>추가해줍니다.

  -> App 컴포넌트가 반환할 값으로 다른 컴포넌트를 추가해주는 것입니다.

        

 

적용된 화면

개발자 도구에서 살펴보기

 

 

 

+) 방법2. 컴포넌트 만들기

 

< .src / App.js >

1. function A( ) 만들기

 

2. function App( )의 <div></div>내에 <A/> 적기

 

function A () {
	return....
    }
    
function App() {
	return (
    <div>
    ....
    
    <A/>
    </div>
    );
}

 

** 짧은 코드로 작성할 수 있는 컴포넌트들은 모두 App.js에 넣어두는 게 효율적!

 

 

 

3. props

 

props란?

컴포넌트에서 컴포넌트로 전달하는 데이터입니다.
& 비효율적인 컴포넌트 코드를 수정할 수 있습니다.

 

만약, A라는 컴포넌트가 10개 이상 필요한 상황이라면

아래처럼 코드를 작성할 수 있습니다.

function A () {
	return....
    }
    
function App() {
	return (
    <div>
    ....
    
    <A/>
    <A/>
    <A/>
    <A/>
    .
    .
    
    </div>
    );
}

하지만 이 코드는 상당히 비효율적이죠.

 

 

 

이 때 필요한 것이 props입니다.

 

1) <A/>코드 <A fav = "B"/>로 수정하기

function A () {
	return....
    }
    
function App() {
	return (
    <div>
    ....
    
    <A fav = "B" />
    
    </div>
    );
}

   ** props의 데이터는 문자열을 제외하고, 모두 { }로 감싸야 합니다.

 

 

2) ./src/App.js

 

   A 컴포넌트의 인자로 props를 전달합니다.

function A (props) {
	console.log(props);
	return....
    }
    
function App() {
	return (
    <div>
    ....
    
    <A fav = "B"/>
    </div>
    );
}

 

2) 여러 가지 방법으로 인자 전달하기

function A (props) {
	console.log(props);
	return <h1>i like {props.fav}</h1>;
    }
    
function App() {
	return (
    <div>
    ....
    
    <A fav = "kimchi"/>
    </div>
    );
}

또는

function A (props){
	{fav} = props;
    return <h1> ... {fav} </h1>;
}


// 또는

function A ({fav}){
	return <h1> ... {fav} </h1>;
}

로도 사용 가능합니다.

 

인자로 전달되어 출력된 모습