React Components와 Props, 이벤트

공식 문서 바로가기

Components

• 사용자 정의 태그 사용(대문자로 사용) → 함수를 정의
  : 함수의 형태로 사용 (생산성 증가)

function Header(){
	 return <header>header</header>
}
// Header의 함수를 정의
// header는 태그 


function App(){
	<Header></Header>
	// 사용자 정의 태그 (컴퍼넌트) Header로 사용
}

props

• 속성

function Header(props){ // 파라미터로 props받아줌
	 return <header>{props.title}</header>
}  

function App(){
	<Header title="속성 내용"></Header>
	// 속성 내용 작성
}

function Nav (props){ //속성 받아옴
	const lis = []
	//lis 라는 배열로 뿌려줄수 있게 해주기
	for(let i = 0;i <props.topics.length; i++){
		const t = props.topics[i];
		lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a><li>)
	}

	return <nav>
	<ol>
		<li><a href="#"></a></li>
		//위의 구조를 반복해서 가져올수 있게 코드를 짜야함
		
		{lis} //lis 라는 함수를 불러올수 있게 하기
	</ol>
	</nav>
}


function App(){
	const topics = [ //배열로 받아오기
		//속성값들을 배열 코드로 작성
		{id: 1, title:"html" , body:"html..."},
		{id: 2, title:"css" , body:"css..."},
		{id: 3, title:"js" , body:"js..."}
	]

	<Nav topics = topics></Nav>
	// 이렇게 작성할시에는 topics이라는 문자열을 받아옴
	<Nav topics={topics}></Nav>

}

이벤트

function Header(props){ //파라미터
  return <header>
  <a href="/" onClick={(event)=>{
    event.preventDefault();
    props.onChangeMode();
  }}>{props.title}</a>
  </header>
}

function App() {
return (    
    <div>
      <Header title="web1" onChangeMode={()=>{
        alert("header");
      }}></Header> 
)
}
// props(속성) onChangeMode로 입력
// 컨퍼넌트에 공통으로 작성되어야할 이벤트 작성
// 속성에 있는 onChangeMode 불러와서 사용가능

• 참고

function(){}
회살표 함수 : () => {}