반응형 개발 기록/front - react11 [react] React 컴포넌트와 Props, State 1. React 컴포넌트란? React 컴포넌트는 UI(사용자 인터페이스)를 나누는 독립적이고 재사용 가능한 단위컴포넌트는 JavaScript 함수 또는 클래스 형태로 정의된다 props를 입력으로 받아 JSX를 반환한다 ※ 알아볼 점 ① 함수형 컴포넌트와 클래스형 컴포넌트 중 어떤 것을 선택해 사용해야 할까요?② Props와 State의 차이는 무엇인지 정리 2. React 컴포넌트의 구성2-1. 함수형 컴포넌트JavaScript 함수로 작성되며 props를 받아 JSX를 반환한다 주로 간단한 UI를 표현하거나 React Hooks와 함께 상태를 관리할 때 사용한다 function Greeting(props) { return Hello, {props.name}!;} 2-2. 클래스형 컴포넌트 ES.. 2024. 11. 25. [JavaScript] 화살표 함수 = (arrow function) => {} react 게시판을 만들면서 화살표 함수를 많이 썼는데, 화살표 함수에 대해서 정리가 필요하다는 생각이 들었다 0. 화살표 함수란?화살표 함수란 무엇일까? = () => { } 위 문법은 화살표 함수(arrow function)을 정의하는 JavaScript 문법이다 ES6(ECMAScript 2015)에서 도입되었으며, 기존 함수 표현식보다 간결하게 작성할 수 있다 1. 기본 문법const 함수명 = (매개변수) => { //함수 내용};간결한 함수 정의 : 기존 function 키워드를 사용한 정의보다 간단함 this의 바인딩 : 화살표 함수는 자신만의 this를 가지지 않고 정의된 렉시컬 컨텍스트(lexical context)**의 this를 사용한다 반환값 생략 가능 : 중괄호를 생략하면 바.. 2024. 11. 20. React의 UseEffect는 왜 두 번씩 실행되어 빡치게 만드는가 React 게시판을 만들다가 조회수 구현을 하는데 게시글을 클릭할 때 마다 조회수가 두번씩 올랐다 왜 이러는지 이유를 찾아보겠다 React에서 useEffect 실행 방식 useEffect : 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다 1) useEffect가 처음 렌더링될 때만 실행하고 싶다 = 마운트 될 때만 실행된다 useEffect(() => { //마운트 시 API 호출 axios.get('https://api.example.com/posts') .then(response => setData(response.data)) .catch(error => console.error('데이터 로드 실패:', error)); }, []);// 빈 배열로 설정해 마운.. 2024. 11. 16. [REACT] Failed to compile. Module not found : Can't resolve 'react-router-dom' * 이슈 상황 *리액트에서 버튼을 클릭하면 페이지가 이동하도록 만들어주는데 compile 에러가 발생했다(useNavigate를 사용해 이벤트를 설정 중) ※ 참고 : useNavigate란 ? 리액트 라우터 v6에서 새롭게 추가된 hook이다 useNavigate를 사용하면 JavaScript 함수 내 다른 페이지로 이동할 수 있다 useNavigate는 주소 표시줄의 URL을 변경하지 않으며 페이지 이동만 수행한다 Failed to compile. Module not found : Can't resolve 'react-router-dom' * 해결 방법 * => react-router-dom을 설치해준다 yarn 명령어, npm 명령어 둘다 해봤는데 결국 npm으로 설치함1), 2) 패스하셔도 되.. 2024. 11. 4. [REACT] npm 패키지 설치 중 warn 이슈 - fsevents, requires a peer of typescript * 이슈 증상* npm install mysql 해당 명령어 실행으로 패키지 설치 시 아래 경고들이 나타남 1. fsevents npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents): 혹은 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 그게 뭔데? fsevents는 macOS 운영체제에서 사용되는 모듈이며 디렉터로리에 변경사항이 발생했을 때 알림을 전달해주는 역.. 2024. 10. 31. 이전 1 2 다음 반응형
