1.컴퍼넌트와 프롭
컴퍼넌트는 함수형태로 만들고, 컴퍼넌트의 파라미터는 관례적으로 props 라는 이름으로 써준다.
return 안에서 변수를 갖다 쓰고 싶으면 {}안에 넣어서 일반 문자열과 구분 해 준다
function Nav(props)
{
const lis = [];
for(var i = 0; i < props.topics.length; ++i)
{
var topic = props.topics[i];
var id = topic.id;
var title = topic.title;
var li = <li key={topic.id}><a href={'/read/'+id}>{title}</a></li>
lis.push(li);
}
return (
<nav>
<ol>
{lis}
</ol>
</nav>
)
}
만들어둔 컴퍼넌트를 호출 할 때는
function App() {
const topics = [
{id:1, title:'html'},
{id:2, title:'css' },
{id:3, title:'js'}
];
return (
<div className="App">
<Nav topics = {topics}></Nav>
</div>
);
}
2.이벤트
역시나 프롭에 담아서 정의한 이벤트를 호출하려는 컴퍼넌트에 넘겨주고, 컴퍼넌트에서는 넘겨받은 이벤트를 호출 해 줄 수 있다.
문법적으로 생소한부분들을 여러번 타이핑 해 보면서 익숙해지는 과정만 남은듯.
이벤트 호출시 파라미터로 event.target를 받아오는 경우가 많은데, 여기서 타겟은 자기 자신이다. 예를들어서
contents.push(<li key={topic.id}><a id={topic.id} href={'/'+topic.title} onClick={(event)=>
{
event.preventDefault();
props.onclicktopic(event.target.id);
}
}>{topic.title}</a></li>);
위 상황에서는 a 태그 안에서 onclick의 이벤트이므로 target는 a태그가 되고, id는 a태그의 id가 된다.
아 그리고, li태그를 만들어서 push해서 사용하는 경우에는 꼭 반드시 li태그별로 고유한 key값을 넣어줘야 한다. 안그러면
빨간 warning를 경험하게 된다
3.스테이트
일반변수를 useState('')로 감싸주는 형태이고, 값이 변했을 때 값을 가지고있는 함수를 한번 호출 해 주는 역할을 한다.
const [mode,setMode] = useState('WELCOME');
값 접근
alert(mode);
값 셋팅
setMode('BYE')
2.C R U D
Create
Read
Update
Delete
react에서 객체를 담고있는 변수에 push 를 하려면 복제본을 만들고 set변수로 대입 해줘야한다.
변수 자체를 useState로 감싸준 뒤 아래 처럼 복제본을 만들어서 set 해준다
1.반복 복사
const newTopics = [...topics];
2.단품 복사
var newtopic = Object.assign({}, topic);
>레퍼런스타입 복사
const newTopics = topics;
이런식으로 해 주면 주소 복사가 되어 newTopics 를 수정 할 경우 topics 안의 내용이 바뀐다