[신한투자증권 프로디지털아카데미] React.js & JavaScript 헷갈렸던 개념 정리

신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다

Day 28 (20250605)

 

 

---

궁금했던 점들 정리

 

1. main.jsx의 <StrictMode> 

 

버그를 잡기 위해 랜더링을 두번 한다. 리액트는 순수함수가 아닐 경우에 예측 불가한 상황이나 오류가 생길 수 있어서

순수함수임을 지켜줘야 하는데 StrictMode에서 두 번의 랜더링을 통해 동일한 값이 나오는지 비교하고

그렇지 않으면 경고를 해준다.

또한 useEffect의 사이클이 한번 더 돈다.

또 문자열 ref 사용에 대한 경고, createRef 사용권장, 권장되지 않는 findDOMNode 사용경고, 레거시 contextAPI 검사 등의 기능을 하며

개발환경에서 strict하게 개발하도록 도와주는 역할을 한다.

 

이 <StrictMode> 가 활성화 되어 있는 상황에서는 콘솔에 두번씩 찍히는 걸 볼 수 있기 때문에

우리는 리액트를 배우는 입장에서는 이 모드를 주석 처리 하고 하는 것을 추천한다.

 

 

2. 함수 표현식과 함수 선언식

첫번째 질문은. 함수 선언식과 함수 표현식에 대한 이해 필요
function이라는 키워드를 쓰는 건 함수선언식이고 (위에서도 호출가능)
함수 표현식은 그게 호출된 이후로만 호출이 가능함.
sample()

// 함수 선언식
function sample(){

}
func1() // x
// 함수 표현식
const func1 = sample(){

}


const func2 = ()=>{

}

함수 선언식과 함수 표현식에 대한 이해 필요

function이라는 키워드를 쓰는 건 함수 선언식이고 (위에서도 호출가능)

함수 표현식은 그게 호출된 이후로만 호출이 가능함.

 

 

함수 선언식 (Function Declaration)

 

함수 선언식은 function 키워드를 사용하여 함수 이름과 함께 함수를 선언하는 방식

함수 선언식은 자바스크립트에서 가장 기본적인 함수 정의 방식으로, 함수 이름을 명시적으로 제공해야함

function 함수이름(매개변수1, 매개변수2, ...) {
  // 실행할 코드
  return 반환값;
}

중요한 특징

 호이스팅이 발생

(함수 선언부가 실제로 호출되는 위치보다 위로 끌어올려져, 함수 선언 전에 호출할 수 있다)

 

 

 

함수 표현식 (Function Expression)

함수 표현식은 함수를 변수에 할당하는 방식
런타임에 함수를 정의하고 필요한 시점에 호출하는 방식

함수 선언식과는 달리 호이스팅되지 않기 때문에 함수가 정의된 이후에만 호출할 수 있음

함수 표현식은 자주 익명 함수와 함께 사용되며, 변수에 할당된 함수는 해당 변수를 통해 호출됨

const 변수명 = function(매개변수1, 매개변수2, ...) {
  // 실행할 코드
  return 반환값;
};

 

익명함수로 일반적으로 사용됨

익명 함수는 이름이 없기 때문에 오로지 변수명을 통해 호출되며, 이를 통해 유연하게 사용 가능함

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(2, 3));  // 6

 

위 코드에서는 multiply라는 변수에 익명 함수가 할당되어 있으며, 이 함수는 변수명을 통해 호출될 수 있다.

 

 

 

구분	예시	호출 가능 시점	특징
함수 선언식	function sample() {}	선언 이전부터 호출 가능 (호이스팅 O)	전통적인 방식
함수 표현식	const sample = function() {}	정의 이후부터 호출 가능	변수처럼 다룸
화살표 함수	const sample = () => {}	표현식의 축약형	this 바인딩 없음

 

 

3. 함수형 컴포넌트 장점

 

1. 리랜더링 될 때의 값을 유지한다
2. 함수형 컴포넌트는 props에 따른 랜더링 결과를 보장받을 수 있다.
3. 매개변수로 받는 props의 destructuring을 활용해 가독성 있다.
4. 함수의 모든 장점을 이용할 수 있다. 
5. 함수형 컴포넌트를 사용했을 때 코드가 간결해지고 가독성도 좋다.

 

컴포넌트와 함수와의 차이에 대해서 헷갈렸는데 

함수형 컴포넌트는 말 그대로 자바스크립트의 "함수(function)" 기반 컴포넌트로

자바스크립트 함수를 선언하듯이 function 으로 컴포넌트를 정의하고, return 문에 JSX 코드를 반환합니다.

 

쉬운 말로 말하면 ui를 그리는 jsx 를 리턴하면 컴포넌트이다.

그리고 보통 컴포넌트들이 정의되어 있을 때 함수선언식 형태로만 정의되어 있던데

그게 아니라 함수표현식으로도 컴포넌트를 정의해서 쓸 수 있다. 

+ 항상 컴포넌트 이름은 대문자로 시작해야 한다!

 

 

4. 하나의 파일에 여러 컴포넌트 정의

한 파일에 여러 컴포넌트를 정의할 수 있고, export를 여러 개 하면 됨

https://github.com/salimi-my/shadcn-ui-sidebar/blob/master/src/components/ui/sheet.tsx

이 깃허브를 봐도 파일에 여러 컴포넌트를 export 하는 것을 볼 수 있음

export를 여러 번 하거나, export default + export 쓰는 것도 가능함

 

 

5. useState의 사용 범위와 re-rendering 영향

useState, useEffect 같은 Hook은 반드시 컴포넌트 함수 내부에서만 사용해야 함

함수 안에 또 다른 컴포넌트 함수를 선언해서 그 안에서 useState 쓰는 것도 가능함

이때 해당 state가 변경되면 그 작은 컴포넌트만 리렌더링됨

즉, useState가 선언된 컴포넌트만 영향을 받고, 바깥 컴포넌트는 영향을 받지 않음

 

처음에 함수 안에서 useState를 쓰면 그걸 감싸고 있는 함수도 같이 리렌더링되는 줄 알았는데,

실제로는 해당 Hook이 선언된 컴포넌트 함수만 리렌더링된다는 걸 알게 됨

 

Hook은 컴포넌트 안에서만 쓰고, 그 state는 해당 컴포넌트에만 영향을 준다!

 

 

 

 

 

 

JavaScript 함수 선언식 vs 함수 표현식: 차이점과 성능 최적화 전략

 

[React] React 컴포넌트란? React 앱을 구성하는 요소

 

 

 

---

 

 

리액트 실습 나갔고, 리엑트와 자바스크립트 개념에 대한 정리를 주말에 쉬는 중에 조금 더 하면 좋을 것 같다.

 

+

 

실습 중에 마지막에 Todo-App 만들었다

빨간색 파란색 초록색 주황색 동그란 요소 클릭하면 저렇게 테두리 바뀌고

추가 버튼 누르면 그 색깔로 추가되는 걸 볼 수 있다.

다른색도 가능하고, 아무것도 선택 안한 채로 추가 누르면 분홍색으로 추가되도록 했다..

 

(다른 실습도 했는데 주말에 다시 복습하면서 차차 올려보겠다)

 

실습하면서 App.jsx 에 css 속성 적용하려고 App.css 만들어서 하려고 했는데

계속 다른 css 속성 때문에 가운데 정렬이 안되는 이슈가 있었다.

알고보니 더 큰 index.css에서 body 속성과 다른 속성에 대한 css 정의가 있어서 그런거였고

그 부분 빼주니까 잘 동작했다.