프론트엔드7-7.[React] 함수 예제, props, 이벤트 처리

렌더링(Rendering) html 요소(element), 또는 React 요소 등의 코드가 눈에 볼 수 있도록 그려지는 것

 

1.  JSON 으로 스타일 적용하기

function App() {

  /*스타일시트를 json을 작성해 적용하기*/
  const style1 = {
    background : 'pink',
    padding : '20px',
    color : '#fff',
    marginTop : '10px',
    textAlign : 'center'
  };

  return(
    <div>
      <div style={style1}>Json 스타일 적용하기</div>
    </div>
  );
}

export default App;

---

2. 함수예제

function App() {

  /*스타일시트를 json을 작성해 적용하기*/
  const style = {
    marginLeft : '10px'
  };

  return(
    <div>
        <div style={style}>
          {1+1==3
            ? (<h1>정답!!</h1>)
            : (<h1>오답!!</h1>)
          }
        </div>
        <div style={style}>
          <div>참이고, 실행문장만 있을 때</div>
          {  // 만약 수식이 거짓이면 아무것도 출력되지 않음
            1+1==2 && (<h1>정답!!!!!!</h1>)
          }
        </div>
    </div>
  );
}

export default App;

 

 

---

3. props

• props: 자바스크립트에서 매개변수(html의 속성과 같은 것)
• parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때 사용(컴포넌트를 호출할 때 넣어주는 것)
• props값은 변경 불가능하다.

constructor(props) {
	super(props);
}

---

예제1) MyCar(props)함수와 myCar1 변수 생성

function Car() {

    const style = {
      marginLeft : '10px'
    };

    function MyCar(props){
      return <h1>나의 자가용은 {props.brand}이다.</h1>
    }

    const myCar1 = <MyCar brand="제네시스"/>;

    return(
      <div style={style}>
        {/* 함수를 표현 */}
        {(<MyCar brand="소나타"></MyCar>)}
        {<MyCar brand="소나타"></MyCar>}
        <MyCar brand="소나타"></MyCar>
        <MyCar brand="소나타"/>
        
        {/* 변수를 표현 */}
        {(myCar1)} 
        {myCar1}
      </div>
    );
}

export default Car;

---

예제2) MyCar2(props)함수와 MyGarage()함수 생성

function Car() {

    const style = {
      marginLeft : '10px'
    };
    
    function MyCar(props){
      return <h1>나의 자가용은 {props.brand}이다.</h1>
    }
    
    function MyCar2(props){
      return <h2>이름:{props.brand.name}, 모델:{props.brand.model}</h2>
    }

    function MyGarage(){
      const carName ="그랜저";
      const carInfo ={name:"모닝", model:"현대"}

      return(
        <div>
          <hr/> {/*myCar와 myCar2함수형 사용*/}
          <MyCar brand={carName}/>
          <MyCar2 brand={carInfo}></MyCar2>
        </div>
      );
    }

    return(
      <div style={style}>
        {(<MyGarage/>)}
      </div>
    );
}

export default Car;

 

---

4. 이벤트 처리하기

• React 이벤트이름은 소문자 대신 camelCase 사용한다.
• JSX에 문자열 대신 함수를 전달한다. 

// html에서 이벤트 처리함수 넣는법
<button onClick="Click()" value="클릭"></button>

// event handler는 jsx 표기를 { }를 사용해 연결한다.
<button onClick={Click}>클릭</button>

---

1. 이벤트 발생시 처리할 함수 생성(매개변수가 없는 함수)

function App() {

    const style = {
      padding:'10px',
      backgroundColor: 'beige',
      textAlign:'center',
      margin:'5px'
    };
    
    // 변수명이자 함수명, 전달받는 매개변수가 없다. 
    const eventHandler1 =()=>{
      alert("버튼을 클릭하셨어요!!");
    }

    return(
      <div>  {/*이벤트 발생시 함수 호출*/}
        <button style={style} onClick={eventHandler1}>클릭</button>
      </div>
    );
}

export default App;

---

2. 이벤트 발생시 처리할 함수 생성(매개변수가 있는 함수)

function App() {
   
   const style = {
		...
    };
    
    // 매개변수가 있는 함수 생성
    const eventHandler2 =(name)=>{
      alert(name+"님 버튼을 클릭하셨어요!!!");
    }

    return(
      <div> {/*이벤트 발생시 매개변수에 데이터를 전달해 함수를 호출*/}
        <button style={style} onClick={()=>eventHandler2('홍길동')}>클릭</button>
      </div>
    );
}

export default App;

---

3. 이벤트 발생시 이벤트 종류를 나타낼 수 있는 함수 생성(매개변수가 있는 함수)

function App() {

    const style = {
		...
    };

    // 이벤트의 종류를 알아보는 함수 생성
    const eventHandler3 =(event, msg)=>{
      console.log(event);  
      alert(msg + event._reactName); // event._reactName-> 이벤트의 종류를 나타냄 
    }

    return(
      <div> 
        <button style={style} onClick={(event)=>eventHandler3(event,'이벤트의 종류는: ')}>클릭</button>
      </div>
    );
}

export default App;

    const eventHandler3 =(msg, event)=>{
      console.log(event);
      alert(msg + event._reactName);
    }

    return(
      <div> 
        <button style={style} onClick={(event)=>eventHandler3('이벤트의 종류는: ',event)}>클릭</button>
      </div>
    );

• 이렇게 매개변수의 순서를 변경해도 동일하게 작동됨

 

 

 

 

 

---

https://ko.reactjs.org/docs/events.html#mouse-events

합성 이벤트(SyntheticEvent) – React

https://velog.io/@yoonvelog/React-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B2%98%EB%A6%AC

React 이벤트 처리