[웹소-프로젝트] 0. React 배우기.(2)

컴포넌트 만들기

좀 반복되는 부분이 있거나, 부분이 길어지면, 사용자 정의 태그(컴포넌트)로 줄이는 것을 생각하게 된다.

 

컴포넌트를 만들때는 함수(function)로 정의하고, 그 안의 리턴값으로 줄이려는 코드를 넣으면 된다.

이때 첫글자는 무조건 대문자로 사용한다.

function Nav(){
	return <nav>
    <ol>
    	<li><a href="#">html</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">js</a></li>
	</ol>
</nav>
}

이런 식이다.

 

컴포넌트의 PROP

<a href="#"></a>나 <p id="b"></p>라거나 <img src="~~">등등

태그들에는 안쪽의 속성값을 정의하는 경우가 있다.

컴포넌트도 이것이 가능할까?

함수형태에서 파라미터로 prop을 받고, 속성인듯 argument로 적용된 이름을 붙여주면 보낸 값을 얻을 수 있다.

그리고 이것을 중괄호{} 안에 넣어서 문자열이 아니라 표현식으로 적용되게 하면, 속성값으로 적용할 수 있다.

 

function Nav(prop){
	return <nav>
    <ol>
    	<li><a href="#">{prop.ex1}</a></li>
        <li><a href="#">{prop.ex2}</a></li>
        <li><a href="#">{prop.ex3}</a></li>
	</ol>
</nav>
}



<!-중략->

<Nav ex1="html" ex2="css" ex3="js"></Nav>

이런 형태이다.

 

 

사실 리스트는 저런 형식으로 하는게 아니긴 한데,

그 방법은 귀찮으니 나중에..

 

 

이벤트 기능

<input type="button" onclick="alert('hi')">와 같이 버튼에 이벤트 기능을 사용할 수 있다.

 

그럼 컴포넌트는 이 기능을 어떻게 해야할까?

컴포넌트의 PROP으로 onChangeMode={function(){ alert('Header')}}를 사용하고,

 

위의 컴포넌트 정의함수에 onClick={function(event){}}을 사용한다. (C가 대문자임에 유의하자)

function 안쪽에 event.preventDefault()를 사용하면 클릭하더라도 리로드되지 않는다.(기본 동작 방지)

주어진 함수를 호출하려면 props.onChangeMode();를 이용한다.

 

++ arrow function을 이용해서 ()=>{<!--내용-->} 형식으로 만들어줄 수도 있다.

 

event.target은 이벤트를 유발시키는 태그를 말한다.

여기서 .id를 붙이면 해당 태그의 id값을 가져온다.