본문 바로가기
반응형

공부/react

 (13)
React 입문 5 (명령형, 선언형) 명령형 프로그래밍 vs 선언형 프로그래밍 📖선언형 프로그래밍선언형 프로그래밍은 원하는 결과를 묘사하는 방식으로 코드를 작성합니다. 아래 예시는 자바스크립트를 이용해 배열에 짝수만 필터링하는 간단한 예제입니다.이 코드는 evenNumbers라는 새로운 배열을 만들어, filter메서드를 이용해 짝수만 필터링해 저장합니다. const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const evenNumbers = numbers.filter(num => num % 2 === 0);console.log(evenNumbers); 이 예시는 짝수를 어떻게 필터링해야 하는지가 아닌, 짝수를 필터링한 결과를 얻는 것에 초점이 맞춰져 있는데요.  ✨선언형 프로그래밍의 특징✨ 데이터를 어떻..
React 입문 4 (불변성) 리액트에서 불변성을 유지해야 하는 이유 📖불변성이란❓불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다. 아래 코드는 불변성을 유지할 수 없습니다.let numbers = [1, 2, 3];numbers.push(4); // 배열에 직접 요소를 추가console.log(numbers); // [1, 2, 3, 4] `numbers.push(4)`는 원래 데이터 구조를 직접 변경하기 때문에 불변성을 유지할 수 없습니다. ❓불변성을 깨뜨리는게 왜 문제가 될까예측 불가능한 코드 : 데이터 구조를 직접 변경하면 다른 부분에서 해당 데이터를 참조하고 있을 때 예상치 못한 방식으로 동작할 수 있기 때문입니다.버그 추적의 어려움 : 원본 데이터가 여러 곳에서 변경된다면 어디서 변경했는지 추적하기 어려워집니..
React 입문 3 (Props, State) props란 📖컴포넌트끼리의 정보교환 방식부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터입니다!props는 반드시 위에서 아래 방향으로 흐른다. (부모 -> 자식 단반향)props는 읽기 전용을 취급하며, 변경하지 않는다. Props로 값 전달하기컴포넌트 간의 정보를 교류할 때 `props`를 사용합니다.// src/App.jsximport React from "react";function App() { return ;}function GrandFather() { return ;}function Mother() { const name = '홍부인'; return ; // 💡"props로 name을 전달했다."}function Child(props) { console.log(props); //..
React 입문 2 (컴포넌트, jsx) React Components란?📖리액트에서 컴포넌트는 UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것을 말합니다! 개념적으로 컴포넌트는 javascript 함수와 유사합니다. 함수형 컴포넌트// props라는 입력을 받음// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)function Welcome(props) { return Hello, {props.name};}// 훨씬 쉬운 표현을 해보면 아래와 같죠.function App () { return hello} 클래스형 컴포넌트class Welcome extends React.Component { render() { return Hello, {this.props.name}; }}  JSX란?📖JSX(j..
React 입문 1 (SPA, CSR, SSR, 라이브러리) React란 📖UI를 만들기 위한 라이브러리입니다. 1. React가 라이브러리인 이유프레임워크라고 불리기에는 제공해야 하는 기능이 부족하고 `상태관리(Redux)`, `라우팅(React-router-dom)` 등 개발자가 직접 제어하기 때문입니다.  프레임워크 vs 라이브러리📖1. 프레임워크개발자가 기능 구현에만 집중할 수 있게 애플리케이션의 구조 또는 틀을 제공하기 때문에 프레임워크가 정한 규칙과 구조 내에서 개발을 진행할 수 있습니다. 2. 라이브러리라이브러리는 특정 기능을 수행하는 코드의 집합으로 필요에 따라 선택적으로 사용할 수 있습니다.ex) `React.js` `react-router-dom` `redux` 3. 제어의 역전 (IoC)개발 시 `제어`를 하는 것은 개발자의 역할인데 프레임..

티스토리툴바