리액트 함수
function 함수(){
console.log(1);
}
...
<h4>{ 글제목[0] } <span onClick={함수}>👍</span></h4><h4>{ 글제목[0] } <span onClick={ function(){console.log(1) } }>👍</span></h4><h4>{ 글제목[0] } <span onClick={ () => {console.log(1) } }>👍</span></h4>위 3개의 코드는 다 동일한 역할을 한다. 함수를 이렇게 3가지 방법으로 사용할 수 있는 것이다.
실습해보자.
let [따봉, 따봉변경] = useState(0);
<h4>{ 글제목[0] } <span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>state 변경함수(예:따봉변경)는 state변경함수(새로운state)의 형태로 적어야 한다. 자바스크립트 문법이기 때문에 따봉변경(따봉=1)과 같이 등호를 사용하면 안 된다.
onClick은 이벤트 핸들러라고 하는데, html 요소를 클릭했을 때 내가 원하는 자바스크립트같은 것을 실행할 수 있게 해준다.
버튼을 클릭하면 '남자코트추천'을 '여자코트 추천'으로 바꿔줄 것이다.
<button onClick={()=>{
글제목[0] = '여자코트추천';
글제목변경(글제목);
}}>글수정</button>이렇게도 할 수 있지만, 이는 원본을 영구적으로 수정하기 때문에, 나중에 원본이 필요한 상황에 대처할 수 없다. 따라서 원본을 보존하는 방법을 알아보자.
<button onClick={()=>{
let copy = 글제목;
copy[0] = '여자코트추천';
글제목변경(copy);
}}>글수정</button>원본을 copy해주고, 그걸 수정해주는 방법이다.
그러나 이렇게 위의 2가지 방법으로 코드를 짜고 결과를 보면, 원하는 결과를 얻지 못한다. 이는 state가 같으면 변경해주지 않기 때문이다. 아래와 같이 ...만 붙여주면 해결된다. 자세한 내용은 '코딩애플 리액트 5강'의 3분 30초 쯤부터 보면 된다.
let copy = [...글제목];간단히 정리하자면, 기존의 state가 문자나 숫자가 아닌 array나 object면, state를 수정할 때는 항상 복사를 한 후 수정해서 state변경함수 안에 집어넣어야 한다. 전문용어로는 shallow copy나 deep copy라고 한다. 즉, 독립적인 카피본을 만들어서 수정해야 한다.
컴포넌트
지금의 코드 일부를 보면 아래와 같다.
<div className="list">
<h4>{ 글제목[0] } <span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{ 글제목[1] }</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{ 글제목[2] }</h4>
<p>2월 17일 발행</p>
</div>
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>html 코드들이 길게 죽 늘어져있다. 리액트에는 이런 html 코드들의 나열을 좀 더 깔끔하게 할 수 있는 방법이 있는데, 그게 바로 컴포넌트다.
컴포넌트를 만드려면 1. function을 만들고 2. return () 안에 html을 담고 3. <함수명></함수명>이라고 쓰는 3단계 작업을 거치면 된다. 한번 해보자.
1. function 만들기
꼭 다른 함수 바깥에 function을 만들어야 한다. 아래는 기본 형식이다.
function 작명({
return(
)
}
2. html을 안에 담아주기
function Modal({
return(
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}return 소괄호 안에는 하나의 태그로 시작해서 하나의 태그로 끝나야 한다. <div>태그를 병렬적으로 사용하면 안 된다는 것이다. 만약 <div> 태그를 두 번 쓰고 싶다면 또 다른 <div> 태그 안에 <div> 태그들을 넣어주면 되는데, 이렇게 하기보다는, 리액트에서는 의미없는 <div> 대신 <></>로 사용할 수 있다. 예시는 아래와 같다.
function Modal({
return(
<>
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
<div></div>
</>
)
}
3. <함수명></함수명> 쓰기
이렇게 만들어준 함수들을 컴포넌트라고 한다.
<Modal></Modal>원하는 위치에 이렇게 html 태그처럼 넣어주면 된다. 이렇게 써도 되지만 더 간단히 쓸 수 있다.
</Modal>이렇게 바로 닫아줘도 되는 것이다.
컴포넌트를 사용하면 좋은 경우
1. 반복적인 html을 축약할 때
2. 페이지 전환할 때, 페이지들을 컴포넌트로 만들어놓으면 좋다. (큰 페이지들)
3. 자주 변경되는 것들