만들고 싶은 홈페이지가 있어 익숙하게 리액트로 세팅하려다가 문득 리액트를 사용하는 근본적 이유가 뭐지? 에서 시작된 perplexity를 이용한 의문 해결을 기록
리액트 -> 리액트의 장점 -> 선언형 프로그래밍 스타일 -> UI를 어떻게 동작해야 하는지가 아닌 UI가 어떤 상태에서 어떤 모습으로 있는가 -> 그럼 전자는 무엇인가 -> 명령형 프로그래밍 스타일 -> 명령형은 움직이는 과정을 상세히 <How> 선언형은 어떤 결과를 얻고자 하는지 <What> (예시) 명령형은 for문으로 반복문과 상태 변경을 사용해 작업 과정을 명시, 선언형은 map을 사용하여 내부 동작은 추상화하면서 최종 결과만 선언 -> 결국 같은 결과값을 가지지만 프로그래밍 스타일에 따른 차이점 파악(명령형 : 복잡한 알고리즘, 세밀한 제어 | 선언형 : UI구성, 데이터 변환 등 높은 추상화가 유리할 때) -> for과 map을 사용할 때 결과는 같은데 효율을 따지자면 map이 더 좋은 것 아닌가? -> 사용하는 상황에 따라서 다르다. 성능과 코드의 가독성 측면에서 차이가 있음.
(성능)
map은 배열의 각 요소에 대해 콜백 함수를 실행하고 새로운 배열을 반환한다. 내부적으로 추가 작업이 포함되어 있어서 큰 데이터셋에서는 for보다 느릴 수 있다. (새 배열을 생성하는 시간) for 루프는 배열의 인덱스를 직접 접근해 수행하므로, 메모리 복사나 새 배열 생성 없이 동작하기 때문에 데이터셋 클 수록 성능 차이 확연.
(코드 가독성과 유지보수성)
map은 간결함. 뭘 수행하는지 직관적으로 이해 가능
const doubled = arr.map(num => num * 2); for루프는 더 많은 제어가 가능하고 복잡한 작업 처리하기에 적합(조건부 반복이나 특정 요소 건너뛰기)
const doubled = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 10) continue; // 특정 조건 건너뛰기
doubled.push(arr[i] * 2);
}
따라서 각각 필요한 상황이 다름
map
- 새 배열을 생성해야 할 때
- 데이터 변환 작업이 간단하고 선언적으로 표현할 수 있을 때
- 코드 가독성과 유지보수가 중요한 경우
for
- 데이터셋이 클 때 (성능 최적화 필요)
- 반복 중 특정 조건을 처리하거나 중단해야 할 때
- 기존 배열을 수정하거나 복잡한 작업이 필요한 경우
이쯤 왔을 때 내가 어쩌다 map과 for의 쓰임 차이까지 왔는지 되돌아가기가 필요했다. 내가 map과 for의 차이점(사용처)을 이해하고자 한 것은 map이 간결한데 for보다 좋은 거 아님? 이었다. 여기서 뭔가 처음 궁금했던 점과 초점이 틀려졌음 느꼈다.
리액트는 선언형을 중요시했고 선언형의 대표적인 코드 예시는 map. 그러니까 map의 특성인 간결함에 있음. map이 for보다 간단한 데이터셋에 쓰인다는 사용처에 초점이 아님.
내 이해의 오류 : 명령형과 선언형 프로그래밍 스타일이 대치되는 줄
명령형과 선언형 프로그래밍 '스타일'의 차이이며 리액트는 선언형 프로그래밍 스타일을 강조할 뿐 명령형 프로그래밍 스타일이 안 쓰이는 게 아니다. 강조의 차이일 뿐 특정 상황에서는 명령형 접근이 더 적합할 수 있으며 이를 통해 복잡한 로직이나 성능 최적화를 할 수 있다. 상황에 따라 적절히 선택하면 되는 것.
개념을 하나 이해하려다 보면 자꾸 꼬리에 꼬리를 물고 늘어지게 된다. 이 습관이 속도를 참 느리게 만들긴 하지만 사실 정말 재밌다. 게임을 하는 기분. 예전에는 하나하나 서치해서 찾아야 했기에 지금보다 더 느렸지만 지금은 gpt나 perplexity를 통해 빠르게 묻고 빠르게 확인하고 필요한 부분을 따로 서치해서 확인하는 등 정말 잘 활용하고 있는 것 같다.
코드 비교로 알아보기
React (선언형)
//우리는 이 버튼을 보여줘, 그리고 클릭되면 handleClick 실행해줘 라고 선언한다.
function handleClick() {
alert('Button clicked!');
}
<button onClick={handleClick}>Click me</button>
JS (명령형)
//우리가 버튼을 어떻게 만들고, 어떻게 붙이고, 어떻게 이벤트를 연결할지 명령식으로 하나하나 직접 써야 한다.
<!-- index.html -->
<body>
<div id="app"></div>
<script>
function handleClick() {
alert('Button clicked!');
}
// 1. 요소를 만들고
const button = document.createElement('button');
// 2. 텍스트를 추가하고
button.textContent = 'Click me';
// 3. 클릭 이벤트 핸들러를 붙이고
button.addEventListener('click', handleClick);
// 4. DOM에 추가하기
document.getElementById('app').appendChild(button);
</script>
</body>
결론 : React는 선언형 프로그램이 스타일이기 때문에 상태에 따라 UI 업데이트가 쉽고 직관적이다.
