JAM Development

🎯 useContext란 무엇일까?**useContext**는 React 컴포넌트들 사이에서 데이터를 쉽게 공유할 수 있게 도와주는 도구예요.React에서는 **"상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달"**할 때 props를 사용하죠.그런데 컴포넌트가 많아지면 데이터 전달이 점점 귀찮아져요.마치 릴레이 경주처럼 데이터를 계속 넘겨줘야 하니까요!useContext를 사용하면 중간에 데이터를 넘겨줄 필요 없이 바로 원하는 컴포넌트에 데이터를 전달할 수 있어요. 🍔 햄버거 가게 이야기로 이해해보자여러분이 햄버거 가게를 운영한다고 생각해 보세요. 🍔이번엔 **햄버거의 "소스"**를 예로 들어 볼게요! 1. props로 전달하는 경우 (불편한 상황)상위 컴포넌트(주방)에서 소스 정보를 하위 컴포넌트..

🧠 useCallback이 뭐예요?useCallback은 함수를 기억해두는 React의 도구예요.쉽게 말해서, "불필요하게 함수를 새로 만들지 않도록" 도와줘요.왜 이게 필요하냐고요?React에서는 컴포넌트가 업데이트될 때마다 함수도 새로 만들어질 수 있어요.이렇게 새로 만들어진 함수가 많아지면 성능에 안 좋은 영향을 줄 수 있거든요. 🍳 요리 이야기로 이해하기여러분이 요리사라고 상상해보세요. 👩‍🍳👨‍🍳레시피를 보고 계란후라이를 만드는 함수를 매번 새로 적는다고 생각해 보세요.첫 번째 요리: 계란후라이 레시피 작성 📝두 번째 요리: 또 계란후라이 레시피 작성 📝세 번째 요리: 또 또 계란후라이 레시피 작성 📝너무 비효율적이지 않나요? 똑같은 레시피를 왜 계속 새로 쓰죠?한 번만 레시피를..

🎯 useActionState란 무엇일까?React에서는 상태(state)라는 개념이 중요해요.상태는 화면에 보여주는 데이터의 현재 상태라고 생각하면 돼요.예를 들어:카운터 앱에서 숫자가 올라가는 것도 상태로그인 폼에서 입력하는 이메일과 비밀번호도 상태그럼 useActionState는 뭐냐고요?**"어떤 행동(action)에 따라 상태를 관리할 때 쓰는 도구"**라고 생각하면 돼요. 🍔 햄버거 가게 이야기로 알아보기여러분이 햄버거 가게를 운영한다고 상상해볼까요? 🍔손님이 와서 햄버거 주문을 합니다. (이게 액션!)이때 가게는 주문받은 메뉴를 확인하고, 주문 리스트에 추가하겠죠? (이게 상태 업데이트!)여기서 중요한 포인트는 주문(액션)에 따라 가게 상태(주문 리스트)가 변한다는 것이에요.이걸 Rea..

타입스크립트가 등장 배경을 간략히 설명하면기존의 자바스크립트에서 발생하던 런타임 에러를 최소화하고 개발자의 실수를 최대한으로 줄여 웹애플리케이션의 품질을 보다 향상 시키는것을 목표로 한다.  기존의 자바스크립트의 문제점은 개발자가 코드를 작성하는 대로실행 후 런타임때에 에러를 발생시킨다.  -- 대표 예시 1Q. 숫자와 문자를 더하기function test(a, b){return a + b;}console.log(test(1,"A")); 결과 "1A"라는 문자열을 리턴한다.   -- 대표 예시2Q. 문자와 문자 나누기function test(a, b){return a / b;}console.log(test("A","B")); 결과  이러한 에러는 타 언어에서는 런타임(Runtime)시점이 아닌 컴파일(C..

React의 기능에는 props라는 부모와 자식 컴포넌트 간의 통신을 할때, 부모 컴포넌트가 자식 컴포넌트한테 원하는 데이터를 보내는것을 의미한다. 이러한 점은 커스텀 버튼 이나 다양한 함수로서 사용이 편리하다 .하지만  props는 오브젝트로 오직 한개의 props만 보낼 수 있고, props 오브젝트안의 파라미터 구성은 여러개 가능하다. props는 기본 방법이 있고, 단축어 방법이 있다.   function Btn(props) { console.log(props.text, "이 렌더링되었습니다."); return ( {props.text} ); }const MemorizedBtn = React.memo(Btn); fu..

ReactJS에는 memo라는 유용한 기능이 있다. 만약 커스텀 버튼을 여러개를 생성 하고 클릭을 할경우, 특정 버튼의 이름이 변경되는 함수가 있다. 특정 버튼의 이름이 변경되는 작업을 할 때, 브라우저에서는 매번 새로운 렌더링을 통해 다시 컴포넌트를 그리는데 이러한 작업은 경우에 따라 서비스를 매우 느리게할 수 있는 중요한 문제점으로 인식된다. 해당 문제점을 해결 하기 위해서 ReactJS에서는 변경이 필요하지않은 컴포넌트는 다시 그리지 않고 변경된 컴포넌트만 다시 그리는 작업을 해주는 함수가 React.memo 라는 함수이다. function Btn({ text, onChangeValue }) { console.log(text, "이 렌더링되었습니다."); return ( {text} ); } .....