컴포넌트 작성규칙

1) 컴포넌트는 반드시 1개의 요소만을 반환(return)시켜야한다.

jsx문법을 사용하여 컴포넌트를 정의하는 이유는 추후 렌더링 시키고자 하는 html요소를 정의하기 위함입니다. 따라서 작성해야하는 HTML태그들이 많겠죠.

이 작성규칙은 1개의 요소만 반환 시킨다는게 아니라 , 요소들을 하나의 최상위 요소 아래에 포함시켜서 반환해줘야 한다는 규칙입니다.

function App(){
    return (
        <div> // 반환시켜줘야할 1개의 div태그
            <h1>hello react</h1> // 여러개의 자식요소를 추가해도 문제되지 않는다.
            <h1>hello react</h1>
            <h1>hello react</h1>
            <h1>hello react</h1>
            <h1>hello react</h1>
            <h1>hello react</h1>
        </div>
    )
}

위 코드처럼 하나의 부모(root)요소에 자식노드를 여러 개 추가하는 것은 문제되지 않습니다. 단, 2개의 최상위요소를 반환시킬 수는 없습니다.

function App(){
    return (
        <div> // div태그 1
            <h1>hello react</h1> 
            <h1>hello react</h1>
            <h1>hello react</h1>
        </div>
        <div> // Error:: JSX expressions must have one parent element
            <h1>hello react</h1> 
            <h1>hello react</h1>
            <h1>hello react</h1>
        </div>
    )
}

만약 여러개의 태그를 묶어서 반환해야 한다면 빈태그(<></>)를 사용하여 묶어줍니다.

function ListItems(){ 
    return (
      <> // 리액트에서 Fragment라고 부릅니다.
        <li>list-item1</li>
        <li>list-item2</li>
        <li>list-item3</li>
        <li>list-item4</li>
        <li>list-item5</li>
       </>
    )
}

2) HTML 이벤트 속성은 Camel Case로 작성한다

// jsx문법
function App(){
    return (
        <div> 
            <button onClick={() => console.log('click') }>버튼</button>
        </div>
    )
}

jsx에서는 HTML요소에 click과 같은 이벤트를 부여할때 onclick이 아니라 onClick을 사용합니다. 기존 html에서 사용하는 방법과는 많이 다른데 비교해보자면 아래와 같습니다.

//HTML방식
<button onclick="console.log('click');">버튼</button>
//JSX방식
<button onClick={() => console.log('click') }>버튼</button>

우선 속성명도 onClick , onclick으로 다르고 속성값도 문자열("")이 아닌 {}로 작성합니다. 실행시킬 코드도 console.log('click')이 아니라 함수형태로 작성합니다.

이벤트 부여시 자주 하는 실수

리액트에 미숙한 상태에서 버튼에 클릭이벤트를 부여한다고 할 때 자주 발생하는 실수 모음입니다.

1) 속성명 오타

jsx방식의 이벤트 부여시 속성명은 반드시 CamelCase라는걸 명심하세요

<button onclick={fn}>버튼</button> X

<button onClick={fn}>버튼</button> O

2) 함수호출한 값을 바인딩

jsx방식으로 이벤트 부여시 실행할 코드는 함수타입으로 전달해야 합니다. 에러가 나는 경우를 보면 대부분 함수를 호출 한 특정 값을 대입하는 경우가 많습니다.

<button onClick={fn()}>버튼</button> X// fn함수의 반환(return)값이 바인딩. 버튼 클릭시 fn함수 반환값이 함수라면 실행.

<button onClick={fn}>버튼</button> O // fn함수 바인딩. 버튼 click시 fn함수 실행

3) class속성 작성시 className을 사용한다.

jsx문법은 javascript의 확장형이고 javascript에서 class는 중요한 예약어이기 때문에 inline으로 작성하지 못합니다. 따라서 jsx문법에서 html요소에 class를 부여할떄는 className을 사용합니다.

function App(){
    return (
        <div className="react"> 
            <button>버튼</button>
        </div>
    )
}

4) style속성값은 객체로 작성한다.

inline으로 style을 부여하고자 할때 순수 javascript에서는 style="color:white" 이런식으로 코드를 작성했는데 jsx에서는 다음과 같이 객체{color : 'white' , backgroundColor: 'black'}형태로 작성합니다.

function App(){
    return (
        <div style={{color : 'white' , backgroundColor: 'black'}}> 
            <button>버튼</button>
        </div>
    )
}

5) JSX문법에서 자바스크립트 변수를 사용할때는 {}를 사용한다

4번 코드에서 style값은 객체형태로 작성되어 있습니다. 근데 그 객체를 중괄호가 다시 감싸고 있는데 jsx문법에서 {}는 자바스크립트 코드를 의미합니다.

예를 들어 위 style속성값을 js변수로 관리한다고 했을때는 아래와 같이 작성합니다.

function App(){
    let text = "jsx is easy";
    let divStyle = {color : 'white' , backgroundColor: 'black'};
    return (
        <div style={divStyle}> // {divStyle}에는 divStyle변수가 바인딩된다.
            <button>{text}</button> // {text}에는 text변수가 바인딩된다.
        </div>
    )
}

6) 모든 요소는 닫아줘야 한다

일반 HTML에서는 <img>, <input>, <br>태그 등을 작성할때 닫아주는 태그를 따로 작성하지 않아도 문제되지 않았습니다. jsx문법에서는 반드시 모든 태그를 명시적으로 닫아줘야 컴파일 에러를 발생시키지 않습니다.

function App(){
    return (
        <div>
            <img src="" alt=""/>
            <br/>
            <input/>
        </div>
    )
}

7) 컴포넌트는 대문자로 작명한다.

리액트는 렌더링해야 할 요소가 소문자로 시작하면 기본 HTML요소로 간주하고 , 대문자로 시작하면 React 요소로 간주합니다. 따라서 리액트 컴포넌트를 소문자로 작성하면 잘못된 렌더링이나 오류가 발생할 수 있으므로 대문자로 작성합니다.

function App(){
    return (
        <div> // 소문자로 시작시 html요소로 간주
            <ChildComponent/> // 대문자로시작시 React요소로 간주.
            <childComponent2/> // react컴포넌트지만 소문자로 작성시 html요소로 해석한다.   
        </div>
    )
}

8) return 되는 html요소는 ()로 묶어준다.

리액트에서 하나의 요소를 반환 시켜 줄 때는 ()로 묶어주는게 관례입니다. 사실 제대로 작성만 한다면 묶어주든 말든 상관은 없는데 실수를 방지하기 위해서는 ()묶어주는 게 좋습니다. ()묶어두지 않은 경우의 예시는 아래와 같습니다.

// return 뒤에 반환해야할 root요소가 바로 온다면 ()묶어주지 않아도 괜찮습니다.
function App(){
    return <div> 
                <h1>Hello React</h1>
           </div>
}

// return 뒤쪽에 공백이 오는 경우 ()묶어 주어야 div태그를 반환할 수 있습니다.
function App(){
    return 
           <div> 
                <h1>Hello React</h1>
           </div>
}