불변성
메모리에 있는 값을 변경할 수 없는 것. 원시데이터는 불변성이 있고, 객체/배열/함수는 불변성이 없다. 자바스크립트 기초 강의에서 몇 번이나 본 내용!!!
리액트에서 컴포넌트를 렌더링하려면 State에 변화가 있어야 하는데, 원시데이터가 아닌 객체/배열/함수의 경우에는 메모리 저장공간의 값이 바뀔 뿐 참조하는 저장공간은 같기 때문에 바뀐 내용이 렌더링되지 않는다. 따라서 변경한 값이 원하는대로 화면에서도 다시 렌더링되게 하려면 불변성을 지켜야 한다.
순수함수
펼침 연산자를 사용하여 매개변수를 복사한 값을 변경하는 함수
// 매개변수를 복사한 값을 변경하는 순수함수
const addSixPure = (arr) => {
newArr = [...arr, 6]; // 펼침 연산자로 새로운 배열에 6 추가
return newArr;
};매개변수를 복사해서 변경하는 게 아니라 매개변수에 직접 변경 사항을 적용하면 불순함수이다. 컴포넌트의 상탯값은 불변 객체로 관리해야만 한다. 따라서 리액트에서는 순수함수를 사용하여 UI 개발의 복잡도를 낮추고 버그 발생 확률도 줄일 수 있다.
카운터 앱 만들어보기
일단 처음 바로 써내려간 코드는 이런 느낌이다. changingNum 이라는 이름의 state를 만들어주고, 초깃값은 0으로 지정해주었다. 이 changingNum의 state에 따라 바뀌게 될 숫자 자리를 {changingNum}으로 만들어 주고, 그 밑에 버튼 2개를 만들었다. 첫번째 버튼은 클릭시 changingNum에 +1을 해주도록 했고, 두 번째 버튼은 -1을 해주도록 되어있다.
음... 샘플 이미지와 비슷하게 만들어지기는 했는데, +1 버튼을 클릭했을 때 숫자가 1로 바뀌는 것이 아니라 01로 바뀌는 문제가 있다. 한 번 더 버튼을 클릭하면 011, 또 한번 클릭하면 0111 ... 그런데 -1 버튼을 클릭하면 이건 또 1씩 숫자가 줄어들긴 한다. 뭐야 이거 무서워...
아무래도 처음에 초깃값으로 입력된 0이 숫자가 아니고 문자로 인식되어서 생기는 문제가 아닐까? 하는 생각이 든다.
useState 괄호 안에 "0"으로 써놨던 걸 그냥 0으로 수정했더니 해결됐다 😇😇😇 어떻게 생각하면 당연한 건데 놓쳐버렸다. 아직 화살표함수 쓸 때마다 얼어버리는 경우가 있는데 이제는 의식적으로 써보려고 노력해야겠다.
스타일링
- css파일 분리해서 넣는 방법
문서 상단에 App.css를 연결해준 다음, 스타일을 넣고 싶은 요소들에 className을 설정한다.
반가운 녀석 🥹🥹🥹 css에서 하던 방식대로 해주면 된다!!
- 같은 파일 내에서 변수 선언해서 넣는 방법
return문 위에 스타일 내용을 변수로 선언해준다. css에서 쓰던 것과는 조금 다른 형식인데 어떤 느낌인지 바로 알 것 같다. 그리고 꾸며줄 요소들에 스타일 속성을 추가해주면 된다.
- 중복되는 부분 리팩토링하기
위에서 살펴본 2가지 방법 모두 5개의 요소에 똑같은 스타일을 주다 보니 중복되는 부분이 많다. 배열의 map 함수를 사용해서 좀 더 효율적으로 코드를 작성할 수 있겠다.
먼저 요렇게 감자 고구마 어쩌구들로 구성된 새로운 배열을 선언해 준다. return문에서 함수는 {}로 불러오기 꼭 기억하기!!
JSX 문법에 맞게 map 함수를 사용해서 testArr 배열의 요소들 하나하나에 대응하는 변화를 주면 된다. 또한 filter 함수를 사용했을 때 반환되는 걸러진 요소들 역시 배열의 형태이므로, 바로 뒤에 .map을 붙여서 하나씩 스타일을 입혀줄 수 있다!
출력 예시! 파란 부분은 filter로 오이가 아닌 것들만 걸러냈기 때문에 오이가 없다 🥒🥒🥒
- 객체도 map()을 사용하여 효율적으로 짜보기
주어진 데이터가 배열이 아니라 객체형인 경우에도 하나하나 전부 하드코딩할 필요 없이 map()을 사용해서 효율적으로 작성해볼 수 있겠다.
요런 식으로 users 배열에 map 함수를 사용하여 배열 안에 들어있는 것들을 순서대로 return문 조건에 맞게 출력할 수 있다.
그런데 이렇게 코드를 실행하면 원하는대로 출력은 되지만, 문제가 하나 있다.
map함수를 사용해서 반복적으로 return하는 부분은 반드시 key태그를 붙여줘야 한다.
