sodol-dotcom

기본값을 설정하는 이유와 방법을 이해하기 위한 글로, 기본값을 설정해주면 컴포넌트를 더 안전하게 사용할 수 있고 에러를 예방할 수 있다고 한다.  1. 기본개념: `props`란 무엇인가?React에서 `props`는 컴포넌트에 데이터를 전달할 때 사용하는 객체이다. 컴포넌트는 부모 컴포넌트로부터 `props`를 받아 자식 컴포넌트가 그 데이터를 화면에 표시하거나 동작을 처리하게 된다. 예를 들어, `Button` 컴포넌트(자식 컴포넌트)에 `color`라는 `props`가 전달되면 그 값을 이용해서 버튼의 색상을 정할 수 있다. 위 코드를 보면, `color="blue"`로 버튼의 색상이 설정된다.  2. `props`에 기본값을 설정해야 하는 이유만약 `Button` 컴포넌트에 `color`를 전달하..

1. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법: `props`부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하려면, `props`라는 특별한 방법을 사용한다.`props`는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 필요한 속성이다. 예를 들어, 자식 컴포넌트에 이름이나 나이 같은 정보를 전달하고 싶을 때, `props`로 보낼 수 있다.React에서 자식 컴포넌트가 props를 매개변수로 받는 이유https://sodol-dotcom.tistory.com/78  2. `props`가 객체로 전달되는 이유부모 컴포넌트에서 여러 데이터를 전달하려면 `props`를 객체 형태로 묶어서 보낸다. 이 객체 안에는 전달하려는 데이터가 프로퍼티로 저장되어 있다.예를 들어, `name`과..

React에서는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 `props`로 전달하도록 설계되어 있다. 이때 자식 컴포넌트가 이 데이터를 받을 수 있도록 `props`라는 객체가 자동으로 생성되어 자식 컴포넌트의 매개변수로 넘어오게 되는 것이라고 한다. 즉, 자식 컴포넌트에서 `props`를 함수의 매개변수로 설정하는 이유는 React가 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 이 데이터를 자동으로 `props`라는 객체에 담아 전달하기 때문이다.이때 `props`는 객체 형태이며, 전달한 데이터가 `props` 객체의 프로퍼티로 들어간다.  1. 매개변수로 `props`를 사용하는 방식function ChildComponent(props) { console.log(props); ..

React JSX에서 UI 구성할 때, 객체 전달 시 중괄호를 겹쳐서 두 번 사용하게 된다.  1. 첫 번째 중괄호 `{}`JSX에서 React 요소의 속성을 설정할 때, JavaScript 표현식을 사용하기 위한 중괄호이다.return {...}; // 첫 번째 중괄호  2. 두 번째 중괄호 `{}`첫 번째 중괄호 안에 JavaScript 객체를 정의할 때 두 번째 중괄호를 사용한다. 이 경우, 실제 객체의 속성-값 쌍을 정의하는 역할을 한다.즉, 중괄호가 겹쳐서 `{{}}` 형태로 사용하게 된다.const Main = () => { const user = { 이름: "이정환", isLogin: false, }; const userDetails = { age: 25, cit..

자바스크립트는 웹 페이지를 동적으로 만들 때 매우 중요한 역할을 하지만, HTML 태그 자체를 자바스크립트 코드로 직접 리턴할 수 없다. 그래서 JSX라는 특별한 문법을 사용하는데, 이것이 리액트에서 자바스크립트로 HTML과 비슷한 구문을 작성할 수 있게 도와준다.자바스크립트가 HTML 태그를 직접 리턴할 수 없는 이유https://sodol-dotcom.tistory.com/75  1. 기본 개념 이해:자바스크립트는 프로그래밍 언어로, 웹 페이지에서 여러 작업을 처리하고 데이터를 다루는 데 주로 사용된다. 자바스크립트로 HTML 태그를 만들려면 주로 `document.createElement` 같은 메서드를 사용해야 한다. 하지만 이 방식은 복잡하고 코드가 길어질 수 있다.HTML은 웹 페이지를 구조화..

// About.jsfunction About() { return ( 공통 헤더 네비게이션 바 소개 페이지 내용 공통 푸터 );}1. Outlet 이란?`Outlet` 은 주로 React 라우팅 라이브러리인 `react-router-dom` 에서 사용하는 특수한 컴포넌트이다.이 컴포넌트는 여러 페이지를 구성할 때, 부모-자식 관계를 통해 페이지의 일부를 동적으로 바꾸고 싶을 때 사용된다.쉽게 말해, 특정 위치에 다른 컴포넌트를 삽입할 수 있는 “구멍”이나 “창구”라고 생각할 수 있다.  2. 왜 Outlet 이 필요한 이유?웹사이트를 만들 때, 여러 페이지가 있지만 그 페이지들 사이에 공통적으로 유지되어야 하는 부분이 있을 수 있다.예를 들어, 모든 페이지에 동일한 헤더와 푸터가 있고, 중간의..