개발새발개발/React11

• 

  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 이벤트 핸들링 이벤트 핸들링사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것onmouseover, onclick, onchange 등 이벤트를 사용할 때 주의사항1. 이벤트 이름은 카멜 표기법으로 작성한다onclick (X) onClick(O)onkeyup(X) onKeyUp(O) 2. 이벤트에는 함수 형태의 값을 전달한다실행할 자바스크립트 코드를 직접 전달하지 않고, 함수 형태의 객체를 전달한다화살표 함수를 바로 만들어 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 된다 3. DOM 요소에만 이벤트를 설정할 수 있다div, button, input, form, span 등의 요소에는 DOM 이벤트를 설정할 수 있다하지만 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다ex) MyComp.. 개발새발개발/React 2024. 12. 28.

• 

  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 JSX란? 감사하게도 선배가 김민준 개발자님의 "리액트를 다루는 기술(개정판)" 책을 주셨다(정말 감사해요!)오늘부터는 이 책을 공부하며 얻은 React 지식을 요약정리해볼 예정이다 :)  목차  App.js 코드 이해하기import logo from './logo.svg';import './App.css';function App() { return ( Edit src/App.js and save to reload. Learn React );}export default App; import logo from './logo.svg';import './App.css';  Nod.. 개발새발개발/React 2024. 12. 22.

• 

  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로 간단한 홈페이지 만들기2(state, onClick) 참고terminal 창에서 warning message 삭제하는 법/*eslint-disable*/ 오늘 할 것 :좋아요버튼과 좋아요 개수 UI 만들기  좋아요 버튼 만들기onClick Eventhandler클릭했을 때 {} 안의 함수가 실행됨사용법onClick={funcName} 후 funciotn 정의onClick={function() {console.log(1)}}onClick={() => {console.log(1)}}{} 안에는 함수가 들어가야 함 좋아요 개수 UI 만들기State 변경state는 등호로 변경 금지(html에 반영 안됨)useState()에서 변수 선언할 때 두번째 파라미터를 이용해 수정해야 함ex) let [like, likeController ] = useState(0)변경하.. 개발새발개발/React 2024. 12. 20.

• 

  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.

• 

  VS Code React 자동 완성 태그 안될 때 설정 해결 방법 VS code에서 React를 하려고 할 때, 자동 완성 태그가 안됐다구글에 검색해보니 다행히 나와 같은 고충을 겪는 분들이 많아보였다2가지 방법인데 원리는 같고, 1번째 방법이 안되면 2번째로 해보면 될 것 같다  첫번째 방법  1. 왼쪽 상단 [파일] - [기본설정] - [설정] 또는 `Ctrl +`        2. include Languages 검색 후 [항목추가]항목 : javascript  / 값 : javascriptreact        일반적인 경우 위의 방법으로 추가가 가능하지만,   나의 경우 django를 미리 설정해둔 것 때문에VSCode 자체 설정 오류로 항목추가에서 에러가 발생했다   그래서 직접 settings.json으로 가서 수정하니 잘 됐다! (아래 2번째 방법)   .. 개발새발개발/React 2024. 12. 17.

• 

  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.