Frontend study (31) 썸네일형 리스트형 리액트 - 5. Props와 State Props와 State 리액트에서는 데이터를 다루는 데 정말 중요한 개념인 props와 state에 대해 살펴본다. 1. Props props는 properties의 줄임말로 어떤 컴포넌트에게 데이터를 전달할 때 사용한다. 리액트는 단방향 데이터 흐름을 지향하므로 항상 부모 컴포넌트에서 자식 컴포넌트로의 전달만을 허용한다. 따라서 자식 컴포넌트에선 props를 변경할 수 없고 부모 컴포넌트에서 변경한 후 내려줘야 한다. 1) Props 사용해보기 props를 사용하는 방법은 부모 컴포넌트에서 자식 컴포넌트의 속성에 원하는 값을 전달해주면된다. function Children( props ) { return { props.hello }; } export default function Parent() { r.. 리액트 - 6. 리액트에 조건문 사용하기 조건부 랜더링 조건부 랜더링: 특정 조건에 따라 다른 결과를 화면에 보여주는 것을 의미 리액트에서 조건문 사용하기 JSX문은 리액트에서 클래스 컴포넌트에서의 render 함수의 리턴되는 부분이나 함수 컴포넌트에서 리턴 되는 부분을 말하는데 이 JSX문에 if 조건식을 사용할 수 없다. 만약 사용하고 싶다면 즉시 실행함수를 사용하거나 리턴문 위에 작성하면 된다. 주로 리액트의 JSX문 안에서 조건에 따른 분기 처리를 할때는 보통 삼항연산자 또는 단축평가 논리 계산법(짧은 연산자)을 사용한다. 사용해보기 props에 name이 값이 전달되면 "환영합니다." 메시지를 출력되도록 하는 컴포넌트를 만들어보자! (Welcome.jsx) function Welcome({ name }) { return ( 즐거운 시간.. CRA에서 절대경로 설정하기 앞뒤가 안맞아서 수정중.... CRA에서 자체적으로 설정하는법 프로젝트 root 경로에 자바스크립트라면 jsconfig.json, 타입스크립트를 사용한다면 tsconfig.json 파일을 추가한 후 다음과 같이 작성해준다. { "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 이렇게 위와 같이 작성해주면 절대 경로로 사용할 수 있다. 사용하는 방법은 아래와 같다. 만약 App 컴포넌트에서 components/Footer 경로에 있는 Footer 컴포넌트를 불러온다면 import문에 import Footer from 'components/Footer' 이렇게 불러와 주면된다. CRACO 사용하기 ❗ CRACO 를 사용하는 건 타입스크립트를 사용.. React Proxy 설정하기 React Proxy 설정하기 http-proxy-middleware 패키지를 사용해서 Proxy를 설정하는 방법에 대해서 살펴본다. 1. Proxy를 왜 설정하는 거지? 동일한 출처(도메인, 프로토콜, 포트)라면 이러한 설정없이도 요청해도 되지만, 동일한 출처가 아닌 경우 요청을 보낼 때 CORS 이슈가 발생한다. 여기서 CORS란 Cross-origin Resource Sharing(교차 출처 리소스 공유) 의 약자로 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 제도이다. 따라서 CORS 이슈가 발생했다는 건 다른 출처에 접근할 수 있는 권한이 없다는 의미이다. 이러한 문제를 해결하는 데 주로 .. 리액트 - 4. JSX 문법 JSX 문법 알아보기 JSX 문법을 사용하면 자바스크립트 코드에 HTML 태그들을 쉽게 사용할 수 있다. 이 JSX 문법을 사용하기 위해서는 index.js에 아래와 같이 추가해줘야한다. import { StrictMode } from "react"; import ReactDOM from "react-dom"; import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render( , rootElement ); 💡 ReactDOM.render 는 무엇인가? 컴포넌트를 브라우저 페이지에 랜더링하는 역할을 하며 "react-dom" 모듈을 불러와서 사용한다. 이 함수의 첫번째 파라미터에 페이지에 랜더링할 요소를.. 리액트 - 3. 컴포넌트 만들기 컴포넌트 만들기 1. 리액트 컴포넌트 리액트 컴포넌트를 살펴보기 전 컴포넌트에 대해 정리! 컴포넌트 란? - 소프트웨어 시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 '모듈'로서 시스템을 유지보수 하는데 있어서 교체 가능한 부품을 의미한다. - 이는 재사용성을 높이고 유지보수를 용이하게 해 준다. 리액트에서 컴포넌트 란? - 리액트에서 컴포넌트란 독립적으로 기능들을 캡슐화하는 리액트의 최소 단위이다. - 개념적으로 컴포넌트는 부모로 부터 props라고 하는 상태(속성)를 전달받아 화면에 어떻게 표시되는지 기술하는 React Element를 반환하는 함수이다. - 이 컴포넌트는 블록들을 조합해서 원하는 것을 만들 수 있는 제품인 레고 처럼 기능별로 쪼개서 이것들을 조합해서 사용자가 보는 view를.. 리액트 - 2. 작업환경 세팅하기 작업 환경 세팅하기 ❗ 설치 과정은 생략 (인터넷 검색하면 나오므로 과감히 생략!) 1. CRA 설치하기 전에 리액트 작업 환경을 직접 세팅하려면 많은 지식과 시간이 필요하지만, CRA는 리액트 작업에 필요한 도구 (Babel, webpack등) 들을 자동으로 설정해주어 바로 리액트 작업 환경을 구축할 수 있다. 설치하기 앞서, 아래의 것들이 설치되어야 한다. 1) NodeJS - CRA 를 설치하려면 우선, NodeJS가 필요하다 - 공식 사이트에서 LTS 버전으로 설치한다. 💡 NodeJS에는 브라우저 밖의 환경에서 자바스크립트를 실행시켜주는 런타임 환경이다. (설치되었는지 확인) node -v 2) NPM, YARN그리고 NPX NPM - npm은 NodeJS의 패키지를 관리해주는 도구이며 Node.. 리액트 - 1. 리액트 시작하기 리액트 강의를 수강하고 정리한 내용입니다. 1. 리액트란 무엇인가? 공식 문서에 보면 상단에 다음과 같이 적혀있다. 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. 즉, 웹에서 앱과 같은 사용자 경험을 만들 수 있도록 도와준다. 리액트를 왜 사용하는 걸까? 이전의 웹 방식은 서버 사이드 랜더링 (CRA) 이라고 해서 사용자가 요청을 할 때마다 리소스를 다시 다운 받아 리랜더링하는 방식이었다. 이러한 방식은 필요없는 부분을 포함하여 비효율적이다. 이러한 것을 해결하기 위해 클라이언트 사이드 랜더링(SPA)이란 방식이 등장하게 되었다. SPA은 SinglePageApplication의 약자로 단일 페이지로 구성되며 로딩될 때 전체 페이지에 필요한 리소스를 최초 한번 다운 받고, 필요한 .. 이전 1 2 3 4 다음
