array , object state 변경하는 법
function App(){
let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
return (
<button onClick={ ()=>{
let copy = 글제목;
copy[0] = '여자코트 추천';
글제목변경(copy)
} }> 수정버튼
)
}
array , object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다는
기존값은 보존해주는 식으로 코드짜는게 좋은 관습입니다.
그래서 let copy같은 변수에다가 기존 array를 복사해놓고
그걸 조작하는 식으로 코드짜면 조금 더 안전함
state 변경함수 동작원리
state 변경함수를 쓸 때
기존 state === 신규 state 이렇게 먼저 검사해봅니다
그래서 같으면 state 변경을 해주지 않습니다
그래서 위 코드에서도 글제목변경(copy) 해도
copy라는 변수가 기존 state와 같아서 변경을 안해준 것입니다.
Component: 많은 div 들을 한 단어로 줄이고 싶으면...
Component 만들 때 주의점
1. component 작명할 땐 영어대문자로 보통 작명합니다.
2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없습니다.
3. function App() {} 내부에서 만들면 안됩니다.
왜냐면 function App(){} 이것도 다시 보니 컴포넌트 생성문법이죠?
component 안에 component를 만들진 않습니다.
4. <컴포넌트></컴포넌트> or <컴포넌트/> 이렇게 써도됨.
어떤 HTML 들을 Component 만드는게 좋을까?
기준은 없습니다만 관습적으로 어떤 부분을 주로 Component화 하냐면
- 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋습니다.
- 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면
좋습니다. - 다른 페이지를 만들고 싶으면 그 페이지의 HTML 내용을 하나의 Component로
만드는게 좋습니다. - 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을
분해하기도 합니다.
Component의 단점
일단 HTML 말끔하게 쓰려고 Component를 수백개 만들면 그것 만으로도 관리가 힘듦
리액트에서 동적인 UI 만드는 step
동적인 UI : 유저가 조작시 형태가 바뀌는 모달창 탭 서브메뉴 툴팁
경고문 등 ...
1. html css로 미리 UI 디자인을 다 해놓고
2. UI의 현재 상태를 state로 저장해두고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성
프로그래밍할때 '이 경우엔 이렇게 해주세요~" 라고
코드짜고 싶으면 if 조건문을 사용합니다.
JSX에서 조건문 쓰는법
조건문은 if/ else 문법을 쓰면 되는데
JSX 안에서는 if / else 문법을 바로 사용할 수 없습니다
if문법 대신 삼항연산자라는건 JSX 중괄호 안에서 사용가능합니다.
조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드
이렇게 if문 대신 쓸수 있는 문법이 삼항연산자입니다.
3 > 1 ? console.log('맞음') : console.log('아님')
<button
onClick={() => {
setModal(!modal);
}}
>
모달 펼치기
</button>
{modal === true ? <Modal></Modal> : null}