[React] 컴포넌트 기초

import/export

import Profile from './components/Profile';

상위 jsx파일에서 각각의 컴포넌트파일을 import해서 사용한다.

function Profile(){
    return <h1>Profile</h1>;
}
export default Profile;

컴포넌트가 되는 각각의 파일들은 함수를 export하여 상위 파일에서 사용가능하도록 한다.

export default function Profile(){
    return <h1>Profile</h1>;
}

함수명이 바뀔경우 선언부, export부 두번수정이 이루어져야하므로 선언과 동시에 export하여 사용하면 편하다.

props(프로퍼티)

• 상위 컴포넌트에서 하위 컴포넌트로 값을 전달가능

//하위 컴포넌트
export function Profile(props) {
    return (
        <div className='profile'>
            <img 
            className='photo'
            src={props.image} 
            alt="Profile picture" 
            />
            <h1>{props.name}</h1>
            <p>{props.title}</p>
        </div>
    );
}
//상위 컴포넌트
import {Profile} from './components/Profile';
function AppProfile() {
  return <h1>
    <Profile 
    image='http://image url'
    name='jun'
    title='개발자'
    />
    <Profile 
    image='http://www.sdfio.com/4%EC%A4%802.jpeg'
    name='jun'
    title='대학원생'
    />
    </h1>
}
export default AppProfile;

-props 대신 직관적으로 프로퍼티들을 전달할 수도 있음

import React from 'react';
export function Profile({image, name, title}) {
    return (
        <div className='profile'>
            <img 
            className='photo'
            src={image} 
            alt="Profile picture" 
            />
            <h1>{name}</h1>
            <p>{title}</p>
        </div>
    );
}

Event handle

• HTML에서의 이벤트 핸들링

<button onclick="activateLasers()">
  Activate Lasers
</button>

• react에서의 이벤트 핸들링

<button onClick={activateLasers}>
  Activate Lasers
</button>

차이점

리액트에서는 소문자 대신 camelCase로 표기한다
<button onClick={activateLasers()}>와 같이 실행할 코드를 입력하면 렌더링시점에서 호출되기 때문에,
<button onClick={activateLasers}> 형태로 전달해야한다.