- / eslint-disable/
warning ment 차단하는 명령어
자주 바뀌는 것들을 state 사용하면 좋으니까
좋아요 기능도 state사용 적합 !
onClick이벤트는 함수를 따로 만든 후, onClick = {}안에 함수 이름을 넣어야 함
- 함수를 직접 onClick = {} 안에 넣어도 됨
ex) onClick = { () => { console.log(1) } }
state변경함수 특징
기존state == 신규state의 경우 변경 안해줌
array/object 특징
array/object 담은 변수엔 화살표만 저장됨
let arr = [1,2,3];이 경우 [1,2,3]이 저장되는게 아니라,
[1,2,3]이 어딨는지 알려주는 화살표만 들어있음
아래에서 [...글제목] 이렇게 적어주는 의미는
괄호를 벗겨주고, 다시 씌워주세요 라는 의미!
그럼 독립된객체?가 됨
<button onClick={()=>{
let copy = [...글제목];
copy[0] = '여자 립밤 추천';
// state의 두번째 값인 변경될값을()안의 값인 copy로 바꿔주겠다
// 근데 copy는 위에 선언한것처럼 글제목이고,
// copy의0번째 인덱스의 값이니까 '남자 립밤 추천'을 가져와서
// 글수정 버튼을 누르면 '여자 립밤 추천'->'남자 립밤 추천'으로 변경됨 !
// copy함수 사용시, [...]을 붙여줘야 잘 작동이 됨 !
글제목변경(copy);
}}>글수정</button>컴포넌트 만드는 법
1. function만들기
2. return()안에 html담기
3. <함수명></함수명> 쓰기
- function이름은 대문자로, 다른 함수 바깥에 만들어야함
위 코드를 아래와 같이 Modal컴포넌트로 만든 후,
실제 사용하려는 위치에 설정해둔 함수 이름(Modal)으로 태그를 걸어서 사용하면 간편!
컴포넌트 만들면 좋은 것
1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경되는 것들
컴포넌트 단점 : state 가져다쓸 때 문제가 생김
무조건 많이 만든다고 좋은게 아님. 깔끔하게 필요한 부분만 만들어 놓기
컴포넌트 만드는 또 다른 방법
let 함수이름 = () => {
return (
<div></div>
)
}
동적인 UI 만드는 step
- html css로 미리 디자인 완성
- UI의 현재 상태를 state로 저장
- state에 따라 UI가 어떻게 보일지 작성 (조건문 등 사용)
map()사용법
모든 array뒤에는 .map()을 붙일 수 있음, 콜백함수와 함께 사용함
- array 자료 갯수만큼 함수안의 코드 실행해줌
- 함수의 파라미터는 array안에 있던 자료임
- return에 뭐 적으면 array로 담아줌
중괄호 안에서는 for함수도 사용 불가. 그래서 코드를 반복할 때 map함수 사용함
이렇게 반복되는 html요소들을 아래와 같이 map함수를 이용하면 더 깔끔하게 쓸 수 있다
- 근데 아래와 같이 배열이 3개만 있으면 괜찮은데,
100개 이상되면 배열을 다 나열해주기가 어려움
-> 위에서 state로 선언한 배열의 이름을 가져와서 그 이름을 배열 자리에 넣어주면 그 배열의 길이만큼 반복 되어 출력됨
ex) 글제목.map(function(){
return (
)- 근데 이렇게 쓰면 같은 글제목[1] 이렇게 인덱스가 지정되어있기 때문에
같은 글제목만 반복이 된다
-> 이를 해결하기 위해 파라미터에 a를 넣어주고, { 글제목[1] } 자리에 a를 넣어줘서
배열의 수만큼 돌면서 해당하는 글제목이 나오도록 해주면 된다 !
이렇게 하면
이렇게 출력되던 것이
이렇게 출력됨 !
두개의 파라미터를 넣는 방법도 있음
- a는 배열의 수대로 하나씩 돌면서 값을 반환하라고 넣어준 파라미터, i는 반복문 돌 때마다 0부터 1씩 증가하는 정수
