React 독학[Props]

1. Props 란?

기본적으로 Component 에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수,함수,객체,배열 등 JavaSvript의 요소라면 제한이 없다.

주로 Component의 "재사용"을 위해 사용.

props 는 "읽기 전용" 이다.

//컴포넌트 생성
const Welcome = (props) =>{
	return <h1>Hello,{props.name}</h1>
 }
 
 
//컴포넌트 사용
const A = () =>{
	return <div> 
    		  <Welcome name =  "수영"/>
    		  <Welcome name =  "민수"/>
                  <Welcome name =  "영희"/> 
           </div>;
}

 

 

DOM Element 의 Attribures

- 기본적인 DOM Element(div,span 등) 들의 Attrubure 는 카멜표기법 으로 작성한다.

     ex) tableIndex , className 등

 

-그러나 'data-' 또는 'aria-' 로 시작하는 Attribute 는 예외

     ex) data-type , aria-lavel 등

 

-HTML의 Attribute와 다른 이름을 가지는 Attribute 가 있음

     class 는 className / for 는 htmlFor 등

 

-HTML의 Attribute와 다른 동작 방식을 가진 Attribute 가 있음

   1. HTML에서 checked, value 는 해당 값이 초기값 으로 쓰이지만

   2. React 에서  checked , value을 설정하게 되면 기본값이 할당되는 것이 아니라  값이 고정으로 되기 때문에

      실제로 값을 변경하려 하면 변경이 안됨

      기본값을 설정하고 인풋을 자유롭게 변경하도록 설정하려면 defaultValue 나 defaultChecked 를 사용해야 한다

   3. style 등

 

-React 에서만 쓰이는 Attribute  가 있음

    1. key

        React 가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

       엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 한다

       배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.

       두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.

const Names = () =>{
	const names = [
    	{key: '1' , value : '민수'},
        {key: '2' , value : '영희'},
        {key: '3' , value : '길동'}
    ]
    return (
    	<div>
        	{names.nap((item) => (
            	<li key ={item.key}>{item.value}</li> ))}
        </div>
       ) 
   }

 

dangerouslySetlnnerHTML

 

 

 

Props를 활용한 Component 만들기

컴포넌트를 활용할 때 부모 Element로부터 자식 Element로 데이터를 전달해 주기 위해서는 Props를 사용합니다.

함수 컴포넌트의 경우 함수의 첫 번째 인자가 바로 컴포넌트의 Props에 해당합니다.

또한 HTML에서는 Attribute로 String만 전달할 수 있지만 JSX를 사용하는 컴포넌트의 경우 String 뿐만 아니라 어떠한 자바스크립트 표현식을 쓰더라도 값을 전달할 수 있어 편리합니다.

 

 

지시사항 1

1. src/components 디렉토리를 생성하세요.
2. 생성한 디렉토리 내에 Greeting.js 이라는 파일을 생성하세요.
3. Greeting 이라는 함수 컴포넌트를 선언합니다.
4. 생성한 컴포넌트 내에서 username 이라는 Props를 전달받습니다.
5. 생성한 컴포넌트에서 JSX로 <h1> 태그를 이용해 OOO님 안녕하세요. 이라는 문구를 출력하는 Element를 반환하세요.
   (OOO 에는 전달받은 username이 들어가야합니다.)
6. 생성한 컴포넌트를 export 하세요.

   export default Greeting;

7. App.js로 돌아와 Greeting 컴포넌트를 import 하세요.
8. 안녕하세요.가 쓰여진 div 대신 Greeting 컴포넌트를 이용해 환영하는 문구를 출력해봅시다. 이 때 username은 "김민수"로 전달해주세요.

 

// App.js 

import React from 'react';
import Greeting from "./components/Greeting";


function App() {
  return (
    <div className="App">
        <Greeting username="김민수" />
    </div>
  );
}

export default App;

// Greeting.js 

import React from "react";

const Greeting = (props) => {
    return <h1>{props.username}님 안녕하세요.</h1> 
}

export default Greeting;

---

지시사항 2

1. src/components 디렉토리를 생성하세요.
2. 생성한 디렉토리 내에 Student.js 이라는 파일을 생성하세요.
3. Student 라는 함수 컴포넌트를 선언합니다.
4. 생성한 컴포넌트의 Props에서 student라는 변수를 전달받습니다.
5. student object는 다음과 같은 값들을 전달받습니다.

   {
       name: "성명",
       subject: "수업명",
       score: 점수
   }

6. 전달받은 student를 <div> element로 다음과 같은 내용을 출력해보세요.
   점수가 80점 이상일 경우 PASS, 80점 미만일 경우 FAIL로 표시합니다.

   // XXX 학생은 YYY 수업을 수강중입니다.
   // 현재 점수는 ZZ점으로 PASS/FAIL입니다.

7. Student 컴포넌트를 export 합니다.

   export default Student;

8. App.js로 돌아와 Student 컴포넌트를 import 하세요.
9. 다음과 같은 정보를 담고있는 object 두개를 각각 선언하세요.

   {
       name: "김민수",
       subject: "수학",
       score: 88
   }

   {
       name: "홍길동",
       subject: "영어",
       score: 72
   }

10. className이 "App"인 div 안에 선언한 두 개의 object를 각각 컴포넌트에 전달하여 출력하는 코드를 작성하세요.

//App.js

import React from 'react';
import Student from "./components/Student";

function App() {
    const student1 = {
        name: "김민수",
        subject: "수학",
        score: 88
    }
    const student2 = {
         name: "홍길동",
         subject: "영어",
         score: 72
    }     

  return (
    <div className="App">
        <Student student={student1} />
        <Student student={student2} />
    </div>
  );
}

export default App;

 

import React from 'react';

const Student = ({student}) => {
    const strPass = student.score > 80 ? "PASS":"FAIL";
    return <div>
           {student.name} 학생은 {student.subject} 수업을 수강중입니다. <br />
           현재 점수는 {student.score}점으로 {strPass}입니다.
           </div>
}

export default Student;

 

결과물 :

김민수 학생은 수학 수업을 수강중입니다.
현재 점수는 88점으로 PASS입니다.

홍길동 학생은 영어 수업을 수강중입니다.
현재 점수는 72점으로 FAIL입니다.

 

---

 

후기: 이제 React 기초를 위해 코드 작성을 조금씩 해보는데 생각보다 재미있다. 복습도 꾸준하게 하자 !