728x90 > 코딩애플 (부분공개)/React 리액트 기초부터 쇼핑몰 프로젝트까지!46 중요한 데이터는 변수말고 state에 담습니다 오늘의 숙제 : 위 사진처럼 블로그 글 목록 3개를 html 레이아웃을 잘 짜서 만들어오시고 제목부분에 들어갈 3개의 데이터는 state에 저장해본 후에 html에 집어넣어보십시오 (데이터바인딩하세요) 변수에 잠깐 데이터 저장하고 html에 {데이터바인딩}도 할 수 있다고 했는데 중요한 데이터를 저장할 땐 변수 대신 state를 만들어씁니다. state는 왜 쓰는지, state는 어떻게 만들어서 데이터를 저장하는지 알아봅시다. 일단 블로그 글 레이아웃을 만들어봅시다 function App(){ let posts = '강남 우동 맛집'; return ( 개발 blog 글제목 2월 17일 발행 ) } (App.css) div { box-sizing : border-box } .list { text-align.. 2024. 4. 10. 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개 이상한 사람들이 리액트 쓸데없이 어렵게 가르치는데 리액트라고 뭔가 어렵고 복잡하게 코드짜야하고 그런거 아닙니다. 그냥 기존처럼 html css 짜서 웹페이지 만들어나가면 됩니다. 그런데 html 대신 JSX라는걸 쓰는데 이거 사용법을 알아봅시다. 리액트프로젝트의 App.js로 들어갑시다 App.js가 여러분의 메인페이지입니다. 여기 이미 채워져있던 쓸데없는 html들은 싹 비우고 시작합시다. 하나만 남기면 됩니다. import 어쩌구; function App(){ return ( //다지움 ㅅㄱ ) } 이제 깔끔한 백지상태에서 시작할 수 있습니다. 코드 수정했으면 파일 저장을 해야 미리보기 화면에서 잘 보입니다. 본격적으로 블로그 상단 nav를 제작해봅시다. 간단한 블로그를 만들어볼 것인데 상단메뉴가 있.. 2024. 4. 10. 리액트 React 설치와 개발환경 셋팅 개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - 남자답게 숫자 높은 최신버전 써도 되는데 그로 인한 버그와 배포시 에러는 알아서 감수해야함 - 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다. - 설치 중 chocolatey 어쩌구는 설치 안하셔도 됩니다. 2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다. (기존 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 필수) Q. 맥북은 다른가요? A. 다른거 없음 리액트 프로젝트 생성은 1. 작업용 폴더를 하나 만들어줍니다 찾기좋게 바탕화면에 만드는게 어떨까요. 2. 폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다. 맥북은 손가락 두개.. 2024. 4. 10. React 배우기 전에 쓰는 이유부터 알아야 React 왜 씁니까 리액트 문법부터 들이밀면 누구나 이해가 가지 않습니다. 리액트의 정확한 용도를 알아야 리액트라는 라이브러리를 이해할 수 있는데 Naver Vibe, Flipkart, Instagram 이런 웹사이트 들어가봅시다. 들어가면 페이지 전환 같은게 새로고침 없이 부드럽게 동작합니다. 이런 사이트들을 Single Page Application 이라고 하는데 - html 파일을 1개만 쓰고 - 다른 페이지를 보여주고 싶을 때 html 부분만 샥 갈아치워서 보여줍니다. 그래서 부드럽게 동작합니다. 쌩자바스크립트로도 만들 수는 있지만 코드가 너무 길어지는 관계로 리액트라는 자바스크립트 라이브러리를 설치해서 사용하면 이걸 더 쉽게 만들 수 있습니다. 그래서 리액트라는 라이브러리를 배우고 사용하는 것.. 2024. 4. 10. 이전 1 ··· 5 6 7 8 다음 728x90
