props

PROPS

 

img

import reactImg from './assets/exam.png';

function App() {
  return (
    <div>
      <img src={reactImg} width="100" height="100"></img>
   <br/>
   <img src='sample.png' width="100" height="100"></img>
   {/* public 폴더에 sample.png 붙여넣기 할것*/}
    </div>
  );
};

export default App;

 

PROPS

index.js 에서 <React.StrictMode> 막으면 결과가 출력 한번만 됨

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App.js';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 // <React.StrictMode>
    <App />
//  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

import './App.css'
function Avatar(props){
  console.log(props);
 const {name, age, address="제주"}=props;
 return(
  <div>
  이름: {name}
  <br/>
  나이 : {age}
  <br/>
  주소: {address}
  <br/>
  </div>
 );
}
function Avatar2({name, age, address="제주"}){
 return(
  <div>
  이름: {name}
  <br/>
  나이 : {age}
  <br/>
  주소: {address}
  <br/>
  </div>
 );
}
function Member ({person}){
  const {name, age, address}=person;
  return(
    <div>
      이름: {name}
  <br/>
  나이 : {age}
  <br/>
  주소: {address}
  <br/>
    </div>
  )
}
function Member1 (props){
  //const person = props.person;
  const{person} =props;
  const {name, age, address}=person;

  return(
    <div>
      이름: {name}
  <br/>
  나이 : {age}
  <br/>
  주소: {address}
  <br/>
    </div>
  )
}
function App() {
  const addr ="서울";
  const chul = {name:"유관순", age: 18, address:"부산"};
  console.log(chul);
  return (
    <div>
<h1>Avatar</h1>
{/* 문자열을 제외한 값은 전달시 반드시 중괄호를 사용함, 숫자에 "" 지정하면 문자로 전달됨*/}
  회원1: <Avatar name="홍길동" age={20} address={addr}></Avatar>
  <br/>
  {/*props는 전달시 spread 연산자 사용가능 */}
회원2: <Avatar {...chul}></Avatar>
<br/>
회원3 : <Avatar name="이순신" age={20}></Avatar>
<br/>
회원4: <Avatar/>
<br/>
<h1>Avatar2</h1>
Avatar2: <Avatar2 name="강감찬" age={10} address="부산"/>
<br/>
Avatar2: <Avatar2 {...chul}/>
<br/>
<h1>Member</h1>
{/*객체로 전달시 반드시 명시적으로 값을 지정함
변수를 지정하기 위해서는 백틱 `${변수명}`을 사용함
  json 전달시 이중 {{}}을 사요함*/ }
Member1: 
<Member1 person={{name:"홍길동", age:20, address:"서울"}}></Member1>
<br/>
Member2:
<Member person={{name:"홍길동", age:20, address:`${addr}`}}></Member>
    </div>
  );
};

export default App;

import './App.css'
import React from 'react';
import Avatar, { Avatar2 } from './components/Avatar.js'; 
import Member, {Member1} from './components/Member.js';



function App() {
  const addr ="서울";
  const chul = {name:"유관순", age: 10, address:"부산"};
  console.log(chul);
  return (
    <div>
<h1>Avatar</h1>
{/* 문자열을 제외한 값은 전달시 반드시 중괄호를 사용함, 숫자에 "" 지정하면 문자로 전달됨*/}
  회원1: <Avatar name="홍길동" age={20} address={addr}></Avatar>
  <br/>
  {/*props는 전달시 spread 연산자 사용가능 */}
회원2: <Avatar {...chul}></Avatar>
<br/>
회원3 : <Avatar name="이순신" age={50}></Avatar>
<br/>
회원4: <Avatar/>
<br/>
<h1>Avatar2</h1>
Avatar2: <Avatar2 name="강감찬" age={20} address="bbb"/>
<br/>
Avatar2: <Avatar2 {...chul}/>
<br/>
<h1>Member</h1>
{/*객체로 전달시 반드시 명시적으로 값을 지정함
변수를 지정하기 위해서는 백틱 `${변수명}`을 사용함
  json 전달시 이중 {{}}을 사요함*/ }
Member1: 
<Member1 person={{name:"홍길동", age:20, address:"서울"}}></Member1>
<br/>
Member2:
<Member person={{name:"홍길동", age:20, address:`${addr}`}}></Member>
    </div>
  );
};

export default App;

 

 

import React from 'react';

  function Avatar({name, age, address="제주"}){
   return(
    <div>
    이름: {name}
    <br/>
    나이 : {age}
    <br/>
    주소: {address}
    <br/>
    </div>
   );
  }
  export function Avatar2(props){
    const {name, age, address}= props;
    return(
     <div>
     이름: {name}
     <br/>
     나이 : {age}
     <br/>
     주소: {address}
     <br/>
     </div>
    );
   }
  export default Avatar;

 

import React from 'react';

function Member ({person}){
    const {name, age, address}=person;
    return(
      <div>
        이름: {name}
    <br/>
    나이 : {age}
    <br/>
    주소: {address}
    <br/>
      </div>
    )
  }
 export function Member1 (props){
    //const person = props.person;
    const{person} =props;
    const {name, age, address}=person;
  
    return(
      <div>
        이름: {name}
    <br/>
    나이 : {age}
    <br/>
    주소: {address}
    <br/>
      </div>
    )
  }
  export default Member;

spread, map

 

import React from 'react';
import { CORE_AVATARS } from './data/data';

function Avatar(props) {
  const { name, age, address = '제주' } = props;
  return (
    <div>
      Name: {name} <br />
      Age: {age} <br />
      Address: {address}
    </div>
  );
}

function App() {
  // Extracting the name property of the first item in CORE_AVATARS
  console.log(CORE_AVATARS[0].name);
  console.log(CORE_AVATARS[1].name);

  return (
    <div>
      <h1>Core Avatars</h1>
      회원1:<br />
      Name: {CORE_AVATARS[0].name}<br />
      Age: {CORE_AVATARS[0].age}<br />
      Address: {CORE_AVATARS[0].address}
      <hr />
      <h1>Core Avatars2: spread 연산자 이용</h1>
      회원1: <Avatar {...CORE_AVATARS[0]} /><br />
      회원2: <Avatar {...CORE_AVATARS[1]} /><br />
      회원3: <Avatar {...CORE_AVATARS[2]} /><hr />
      <h1>Core Avatars3: map 반복문 이용</h1>
      
      {CORE_AVATARS.map((row, index) => (
        <div key={index}>
          <span>회원{index + 1}</span><br />
         <Avatar
          name={row.name}
          age={row.age}
          address={row.address}
          ></Avatar>
<h1>spread</h1>
<span>회원{index + 1}</span><br />
<span>
  <Avatar {...row}></Avatar>
</span>
        </div>


      ))}


    </div>
  );
}

export default App;

 

export const CORE_AVATARS = [
    {
        name:"홍길동",
        age:20,
        address:"서울"
    },
    {
        name:"이순신",
        age:50,
        address:"전라"
    },
    {
        name:"강감찬",
        age:44,
        address:"경기"
    },
]

 

defaultProps설정

 

import './App.css'
import React from 'react';
import Avatar from './components/Avatar.js'; 
import Member, {Member1} from './components/Member.js';



function App() {
  const addr ="서울";
  const chul = {name:"유관순", age: 10, address:"부산"};
  console.log(chul);
  return (
    <div>
<h1>Avatar0</h1>
{/* default.props의 사용*/}
  회원0: <Avatar></Avatar>
  {/*문자열을 제외한 이외릐 값은 전달시 반드시 중괄호를 사용*/}
  <br/>
  <h1>Avatar1</h1>
  회원1: <Avatar name="홍길동" age={20}></Avatar>
  <br/>
  {/*props는 전달시 spread 연산자 사용가능 */}
회원2: <Avatar {...chul}></Avatar>
<br/>
회원3 : <Avatar name="이순신" age={50}></Avatar>
<br/>
<hr/>
<h1>Member</h1>
{/*객체로 전달시 반드시 명시적으로 값을 지정함
변수를 지정하기 위해서는 백틱 `${변수명}`을 사용함
  json 전달시 이중 {{}}을 사요함*/ }
Member1: 
<Member1 person={{name:"홍길동", age:20, address:"서울"}}></Member1>
<br/>
Member2:
<Member person={{name:"홍길동", age:20, address:`${addr}`}}></Member>
    </div>
  );
};

export default App;

 

 

import React from 'react';

  function Avatar({name, age, address="제주"}){
   return(
    <div>
    이름: {name}
    <br/>
    나이 : {age}
    <br/>
    주소: {address}
    <br/>
    </div>
   );
  }

   Avatar.defaultProps={
    name:"이름없음",
    age:0,
    address:"주소없음"
   };
  export default Avatar;

props 실습

import React from 'react';

function PersonList({ persons }) {
  return (
    <table border='1'>
      
        <tr>
          <th>No</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      
    
        {persons.map((person, index) => (
          <tr key={index}>
            <td>{index + 1}</td>
            <td>{person.name}</td>
            <td>{person.age}</td>
          </tr>
        ))}
     
    </table>
  );
}

export default PersonList;

 

 

import React from 'react';
import PersonList from './components/PersonList';

let persons = [
  { name: '홍길동', age: 20 },
  { name: '이순신', age: 30 },
  { name: '유관순', age: 40 },
  { name: '강감찬', age: 50 },
];

function App() {
  return (
    <div>
      <h1>학생정보</h1>
      <PersonList persons={persons} />
    </div>
  );
}

export default App;

 

personList.js

 

import React from 'react';
import Person from './Person';

function PersonList({ persons }) {
  return (
    <table border='1'>
      <thead>
        <tr>
          <th>No</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {persons.map((person, index) => (
          <Person person={person} index={index}/>
        ))}
      </tbody>
    </table>
  );
}

export default PersonList;

 

 

person.js

 

import React from 'react';

function Person({ index,person }) {
  return (
    <tr key={index}>
      <td>{index+1}</td>
      <td>{person.name}</td>
      <td>{person.age}</td>
    </tr>
  );
}

export default Person;

 

 

app.js 같음

 

children

import React from 'react';

function Avatar ({name, age, address}){
  return(
    <div>
      이름: {name}
      <br/>
      나이: {age}
      <br/>
      주소: {address}
      <br/>

    </div>
  )
}
function Avatar2 ({name, age, children}){
  return(
    <div>
      이름: {name}
      <br/>
      나이: {age}
      <br/>
    children: {children}
      <br/>
      
    </div>
  )
}

function App() {
  const user = {name :"유관순" ,age:18, address:"부산"};
  const user2 = {name :"유관순" ,age:18};
  return (
    <div>
    <h1>Avatar</h1>
    회원1: <Avatar {...user}></Avatar>
    <br/>
    회원2: <Avatar2 {...user2}>서울</Avatar2>
{/*내용이 children으로 전달*/}
<br/>
회원3:{" "}
<Avatar2 {...user2}>
  <span>사진</span>
  <img src="sample.png" width="100"></img>
</Avatar2>
<br/>
    </div>
  );
}

export default App;

계층 구조의 효과적인 Props 전달 방법

 

import React from 'react';
import FirstComponent from './components/FirstComponent';

function App() {
const user ={name:"홍길동", age:20,};
  return (
    <div>
    <FirstComponent {...user}/>
    </div>
  );
}

export default App;

 

🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟

props로 넘기기

import React from 'react';
import SecondComponent from './SecondComponent';
function FirstComponent(props) {
    let user={...props, address:"서울"}
    return (
        <div>
          
            <SecondComponent {...user}/>
        </div>
    );
}

export default FirstComponent;

 

 

import React from 'react';

function SecondComponent(props) {
  const { name, age, address } = props;

  return (
    <div>
      <h2>SecondComponent</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Address: {address}</p>
    </div>
  );
}

export default SecondComponent;

 

 

 

spread 함수 안 쓰고 해보기

 

import React from 'react';
import FirstComponent from './components/FirstComponent';

function App() {
  const user={name:"유관순", age:20};
  return (
    <div>
      <FirstComponent user={user}/>
    </div>
  );
}

export default App;

 

 

import React from 'react';
import SecondComponent from './SecondComponent';
function FirstComponent({user}) {
    const {name, age}=user;
    const data = {name, age, address:"서울"};
    return (
        <div>
           <h1>FirstComponent</h1>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      {/* 주소도 SecondComponent로 전달 */}
      <SecondComponent user={data} />
        </div>
    );
}

export default FirstComponent;

 

 

import React from 'react';

function SecondComponent({user}) {
const {name, age, address}= user;
  return (
    <div>
      <h2>SecondComponent</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      {/* 주소 출력 */}
      <p>Address: {address}</p>
    </div>
  );
}

export default SecondComponent;

 

덮어써짐..

 

import React from 'react';
function FirstComponent(props) {
   
    const user = {...props, name:"서울"};
    return (
        <div>
           <h1>FirstComponent</h1>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      {/* 주소도 SecondComponent로 전달 */}
        </div>
    );
}

export default FirstComponent;

 

 

이벤트 처리

 

import React from 'react';

function App() {
//이벤트 함수는 중첩 형식으로 구현


function handleEvent1(e){
  console.log("handleEvent1"+e.target);
}
function handleEvent2(v,e){
  console.log("handleEvent2",v,e);
}
return (
  <div>
    <h4>1.기본 이벤트 처리 =callback 형식</h4>
    <button onClick={handleEvent1}>OK1</button>
    <h4>2.명시적인 arrow 형식</h4>
    <button onClick={(e)=> handleEvent1(e)}>OK2</button>
    <button onClick={(e)=> console.log(e)}>OK3</button>
    <h4>3. 명시적인 파라미터 전달</h4>
    {/*  error arrow 이벤트 필수
    데이터 전송시 직접 호출 안됨
    <button onClick={handleEvent2(100,e)}>OK4-1</button>  */}
    <button onClick={(e)=> handleEvent2(100,e)}>OK4-2</button>
  </div>
);
}
export default App;

import './App.css';

function App() {
  //이벤트 함수는 중첩형식으로 구현
  //이벤트 객체를 얻으려면 반드시 파라미터로 지정함
  function handleEvent1(e){
    console.log("handleEvent1 => ", e.target);
  }

  function handleEvent2(v, e){//데이터, 이벤트
    console.log("handleEvent2 => ", v, e);
  }

  return (
    <div>
      <h3>1. 기본이벤트 처리 = callback 형식</h3>
      <button onClick={handleEvent1}>OK1</button>
      {/* <button onClick={handleEvent1(e)}>OK1-2</button>
      함수 호출이되어 리턴값을 받아야하는데 리턴값이 없기 때문에 에러 발생 /}

      <h3>2. 명시적인 arrow 형식</h3>
      <button onClick={(e)=>handleEvent1(e)}>OK2</button>
      {/ 리턴된 값이 람다함수로 들어감 /}
      <button onClick={(e)=>console.log(e)}>OK3</button>

      <h3>3. 명시적인 파라미터 전달</h3>
      <button onClick={(e)=>handleEvent2(100,e)}>OK4_1</button>
      {/ <button onClick={handleEvent2(100,e)}>OK4_2</button>
        에러발생 => 데이터 전송 시 직접 호출 안됨
      */}
    </div>
  );
}

export default App;