React8

• 

  React - 컴포넌트 반복(map, callback, key, list, 값 추가 삭제) 자바스크립트 배열의 map() 함수map() : 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성arr.map(callback, [thisArg])arr.map(name, index, array, [thisArg])callback : 새로운 배열의 요소를 생성하는 함수. 3가지의 파라미터를 받음currentValue : 현재 처리하고 있는 요소index : 현재 처리하고 있는 요소의 index 값array : 현재 처리하고 있는 원본 배열thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스const numbers = [1, 2, 3, 4, 5];const processed = numbers.map(functi.. 개발새발개발/React 2024. 12. 30.

• 

  React - ref PreviewHTML에서 id 를 사용해 이름을 다는 것처럼 React에서는 ref(reference)를 이용해 DOM 에 이름을 붙여준다id를 사용할 경우 컴포넌트가 반복될 때, 고유해야할 id 값이 여러번 사용될 수 있으므로 ref를 사용하는 걸 권장한다ref는 컴포넌트 내부에서만 작동한다 refDOM을 직접적으로 건드려야 할 때 사용한다비밀번호 검증 페이지 만들기 실습ValidationSample 컴포넌트 만들기input에 ref 달기버튼을 누를 때마다 input에 포커스 주기 1. 예제 컴포넌트 생성input에서 onChange 이벤트가 발생하면 handleChange 호출하여 state의 password 값을 업데이트button에서 onClick 이벤트가 발생하면 handleButtonClick.. 개발새발개발/React 2024. 12. 29.

• 

  React state, 클래스형 컴포넌트와 함수형 컴포넌트에서의 state와 주의사항 state컴포넌트 내부에서 바뀔 수 있는 값 클래스형 컴포넌트의 state  컴포넌트에 state 설정하기 :  constructor 메서드 사용class Counter extends Component { constructor(props) { super(props); //state의 초기값 설정하기 this.state = { number: 0, }; }반드시 super(props)를 함께 호출해야 한다this.state 를 사용해 초기값을 설정한다 render render() { const { number } = this.state; //state를 조회할 때는 this.state로 조회 return ( {number} .. 개발새발개발/React 2024. 12. 25.

• 

  React 컴포넌트(Component), 화살표 함수, Snippet 목차클래스형 컴포넌트 컴포넌트를 선언하는 방식 2가지 1. 함수 컴포넌트import "./App.css";function App() { const name = "리액트"; return ( {name} );}export default App; 장점선언하기 편리하다메모리 자원을 덜 사용한다최종 배포 후에도 파일 크기가 더 작다(근소한 차이. 성능과 크기면에서 큰 차이는 없음)단점state와 라이플사이클 API의 사용이 불가능하다 => v16.8이후 Hooks 라는 기능이 도입되며 해결됨리액트 공식 메뉴얼에는 함수 컴포넌트와 Hooks의 사용을 권장함 2. 클래스형 컴포넌트import { Component } from "react";class App extends Component.. 개발새발개발/React 2024. 12. 24.

• 

  React JSX 문법과 ESLint, Prettier 적용법 JSX 문법1. 부모 요소 하나로 감싸기컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸야 한다function App() { return ( 부모요소가 없으면 잘 작동하지 않아요 )}export default App;위와 같이 작성하면 아래와 같은 오류가 발생한다  아래와 같이 div 태그 혹은 태그(fragment tag)를 활용하여 감싸줘야 한다.function App() { return ( 부모요소는 반드시 하나! )}export default App; virtual Dom에서 컴포넌트 변화를 효율적으로 감지할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있기 때문이다. 2. 자바스크립트 표현식 사용하기cons.. 개발새발개발/React 2024. 12. 23.

• 

  React로 간단한 홈페이지 만들기3(Component) 오늘할 것 :상세페이지 영역 만들기   Componentdiv가 많아지면 지저분해짐이를 개선하기 위해 component를 사용함App()도 사실은 컴포넌트임  Component 만드는 방법1function 생성function App(){} 밖에 만들어야 함함수명은 영어 대문자로 시작return() 안에 html 축약할 담기 쓰기  컴포넌트를 사용하면 좋은 상황반복적인 html 축약할 때큰 페이지로 전환할 때자주 변경되는 UI  컴포넌트 사용 시 주의사항state 가져올 때 주의state는 다른 함수에서 저장되어 있기 때문에 데이터바인딩이 안됨  컴포넌트 만드는 법2(참고)function 함수 밖에 변수 선언  let Modal = () => { return( ) }   참고1굳이 하나의.. 개발새발개발/React 2024. 12. 21.

• 

  React로 간단한 홈페이지 만들기(JSX 문법, state) 코딩애플님의 2022 리액트 강의 2~6강을 참고해서 React로 간단한 홈페이지 만들기를 해보았다! 무료강의가 6강까지만 있어서 완성도 있는 홈페이지는 안나왔지만,React 입문 느낌으로 해보기 좋았다 이 글 이후부터는 "리액트를 다루는 기술" 책을 바탕으로 공부할 계획이다!  JSX 문법기본 셋팅App.js에서 div 하나만 남기고 지우기 JSX 문법class 넣을 땐 className으로 해야함class 선언과 혼동될 수 있기 때문변수 넣을 땐 {중괄호} : 데이터 바인딩태그 사이 뿐만 아니라 태그 안에도 사용 가능(ex)style 넣을 땐 style={{스타일명:'값'}}카멜케이스로 작성(font-size(X), fontSize(O)) 참고error message는 팝업으로 뜨기도 하고, cons.. 개발새발개발/React 2024. 12. 19.

• 

  React 설치 및 프로젝트 생성 에러 발생 시 해결방법, Nodejs 재설치 React 공부를 위해 호기롭게 시작했으나설치에서부터 난관에 부딪혔다..!  이번 글에서는 React 설치 방법과 에러 발생 시 해결 방법에 대해 작성하겠습니다에러 해결 방법이 궁금하신 분들은 글 하단으로 가시면 됩니다.   React 설치 및 프로젝트 생성 방법 개발 환경 셋팅1. nodejs 검색해서 설치2. vscode 에디터 검색해서 설치3. yarn 설치 (`npm install --global yarn')4. git 설치 프로젝트 생성youtube cordingapple 1. 작업용 폴더 만들기  2. Shift+우클릭 - PowerShell/터미널 열기  3. 터미널 창에 `npx create-react-app 프로젝트명` 입력  4. 만약 허가되지 않은 스크립트 어쩌구 에러가 뜬다면  5... 개발새발개발/React 2024. 12. 9.