반응형 react21 [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. 4. 게시판 validation 만들기 - React와 Node.js 게시판 프로젝트 정보프론트엔드 : React백엔드 : Node.jsDB : MySQLVS Code 사용 게시판 웹 애플리케이션 만들기 https://tiny-immj.tistory.com/92 RESTful API는 데이터를 표준화된 방" data-og-host="tiny-immj.tistory.com" data-og-source-url="https://tiny-immj.tistory.com/92" data-og-image="https://scrap.kakaocdn.net/dn/GTmi6/hyXzKZ1rPk/oNisJfm5l9Y1DIdzG6woW1/img.jpg?width=800&height=295&face=0_0_800_295,https://scrap.kakaocdn.net/dn/Gg27Y/hyXzOg4du.. 2024. 11. 21. [JavaScript] 화살표 함수 = (arrow function) => {} react 게시판을 만들면서 화살표 함수를 많이 썼는데, 화살표 함수에 대해서 정리가 필요하다는 생각이 들었다 0. 화살표 함수란?화살표 함수란 무엇일까? = () => { } 위 문법은 화살표 함수(arrow function)을 정의하는 JavaScript 문법이다 ES6(ECMAScript 2015)에서 도입되었으며, 기존 함수 표현식보다 간결하게 작성할 수 있다 1. 기본 문법const 함수명 = (매개변수) => { //함수 내용};간결한 함수 정의 : 기존 function 키워드를 사용한 정의보다 간단함 this의 바인딩 : 화살표 함수는 자신만의 this를 가지지 않고 정의된 렉시컬 컨텍스트(lexical context)**의 this를 사용한다 반환값 생략 가능 : 중괄호를 생략하면 바.. 2024. 11. 20. 3. 게시판 조회수 구현과 React bootstrap 사용한 껍데기 포장해보기 - React와 Node.js를 사용한 게시판 만들기 프로젝트 정보 프론트엔드 : React백엔드 : Node.jsDB : MySQL VS Code 사용 게시판 웹 애플리케이션 만들기 https://tiny-immj.tistory.com/92 RESTful API는 데이터를 표준화된 방" data-og-host="tiny-immj.tistory.com" data-og-source-url="https://tiny-immj.tistory.com/92" data-og-url="https://tiny-immj.tistory.com/92" data-og-image="https://scrap.kakaocdn.net/dn/dfDXSX/hyXzRiNjlr/p0aFJz9RGKKsKKVcWqdca0/img.jpg?width=800&height=295&face=0_0_800.. 2024. 11. 19. 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. 2. React와 Node.js를 사용한 게시판 웹 애플리케이션 만들기 - CRUD API 구현, 게시글 수정과 삭제 이벤트, Endpoint Todo구현할 기능 : CRUD (게시글 작성, 조회, 수정, 삭제)https://tiny-immj.tistory.com/88 REST, REST API, RESTful의 기본 개념과 간단한 api 만드는 방법 진행=> RESTful API는 데이터를 표준화된 방식으로 주고 받을 수 있게 해주고, " data-og-host="tiny-immj.tistory.com" data-og-source-url="https://tiny-immj.tistory.com/88" data-og-image="https://scrap.kakaocdn.net/dn/wTCDW/hyXwswRshe/g4ojLEG1HJmvRbGB12WoH0/img.jpg?width=800&height=531&face=0_0_800_531,https:/.. 2024. 11. 14. 이전 1 2 3 4 다음 반응형
