본문 바로가기

Programing/React72

006. [코딩애플] [part1] array, object state 변경하는 법 state의 데이터 타입에 따른 상태변경 함수 사용법state의 자료형이 숫자형이나 문자열 등은 어떻게 수정해도 상관없으나, 배열이나 객체인 경우에는 spread operator로 깊은 복사를 해주어야 한다.만약 아래처럼 수정하면 원본 배열 자체가 덮어 씌워져 버린다.function App() { const [cities, setCites] = useState(["서울", "인천", "제주"]); return ( { setCites(["성남"]); }} > 수정하기 );}수정하기 버튼을 누르면 cites라고 상태로 정의한 배열의 첫번째 값을 '서울'에서 '성남'으로 바꾸기 위해 setCites라는 상태변경 함수를 .. Programing/React 2024. 5. 21.
005. [코딩애플] [part1] 버튼에 기능개발을 해보자 & 리액트 state변경하는 법 간단한 팁터미널 Warning(노란색) 지우기.Error(빨간색)은 코드 작동 불가이기 때문에 중요하나, Warning은 변수를 선언해놓고 쓰는 곳이 없다든지, 이런 사항에 대해서 알려주는 기능이다. 도움은 될 수 있으나, 이것 때문에 터미널이 복잡하다면,코드 최상단에 아래 내용을 붙여 넣는다./* eslint-disable */좋아요 버튼 만들기버튼 레이아웃 만들기. 이모지로 만들었다.function App() { let [ title, updateTitle ] = useState( [ '가을 남자 코트 추천', '강남 우동 맛집', '오늘의 일기 예보' ] ); return ( .. Programing/React 2024. 5. 21.
004. [코딩애플] [part1] 중요한 데이터는 변수말고 state에 담습니다 App.js (jsx)에서 HTML 작성하기return 키워느 내부에서만 html 마크업 문서를 작성해야 함.주의사항으로는 한 줄에 병렬로 두 개 이상의 태그를 사용할 수 없음.function App() { return ( {/* 이 곳에서만 HTML 작성 가능 */} {/* 이와 같이 열고 닫는 태그도 병렬로 작성 불가*/} {/* 이렇게 한줄씩 작성해야 함. */} );} Programing/React 2024. 5. 21.
003. [코딩애플] [part1] React에서 사용하는 JSX 기초 문법 프로젝트 기본 준비터미널에 밑의 명령어를 넣어서 실시간 미리보기를 웹 브라우저에 띄운 상태로 작업 시작한다.npm startApp.js 파일 내에 있는 코드 중 가장 최상단의 div 하나만 남기고 다 지우면 됨.JSX 문법 시작하기HTML 만들기 (정확히는 JSX)가장 최상단의 div 안에 HTML 태그를 입력하면 된다. 그런데 이것은 엄밀히 말하면 HTML이 아님. HTML은 .html이라는 파일에만 입력할 수 있고 이건 js 파일이기 때문에 자바스크립트에 HTML 마크업 언어를 입력하기 쉽게 만들어 주는 jsx라는 방식임. HTML과 거의 흡사하게 생겨 편리하지만 조금씩 차이점이 있음.가장 큰 차이는 class를 선언할 때 class라고 속성을 만들면 안 되고, className이라고 속성을 만들어야.. Programing/React 2024. 5. 14.
002. [코딩애플] [part1] 리액트 React 설치와 개발환경 세팅 개발환경 세팅Node.js 설치구글 검색 후 LTS 버전 설치.VSCode 에디터 설치따로 사용하는 에디터가 있으면 그거 써도 됨.프로젝트 생성CRA로 프로젝트 세팅하기React 프로젝트를 만들기 위한 파일들을 직접 설치해서 작업 환경을 만들 수 있겠으나 파일이 너무 많고 복잡하므로 Create React App이라는 라이브러리의 도움을 받을 것이고,이 라이브러리는 Node.js를 설치하면 자동으로 딸려 오기 때문에 Node.js도 설치한 것.그리고 아래 npx 명령어를 사용하면 리액트 프로젝트가 한 번에 구축이 됨.작업용 로컬 디렉토리 생성폴더를 shift 우클릭여기에 PowerShell 창 열기 클릭, 맥은 터미널 열기터미널에 아래 코드 입력npx create-react-app 허가 되지 않은 권한... Programing/React 2024. 5. 14.

티스토리툴바