728x90 반응형 > 코딩애플 (부분공개)145 자식이 부모의 state 가져다 쓰고 싶을 때는 props 보호되어 있는 글 입니다. 2024. 5. 9. map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때 보호되어 있는 글 입니다. 2024. 5. 9. 리액트 환경에서 동적인 UI 만드는 법 (모달창 만들기) 보호되어 있는 글 입니다. 2024. 5. 7. Component : 많은 div들을 한 단어로 줄이고 싶으면 보호되어 있는 글 입니다. 2024. 4. 11. array, object state 변경하는 법 보호되어 있는 글 입니다. 2024. 4. 11. 버튼에 기능 개발을 해보자 & 리액트 state변경하는 법 오늘의 숙제 : 버튼을 누르면 첫 글 제목이 '여자 코트 추천'으로 바뀌는 기능의 버튼을 만들어봅시다. 버튼에 기능개발을 해보도록 합시다. 버튼을 눌렀을 때 자바스크립트를 실행시키고 싶으면 어떻게 해야하는지, 그리고 state를 수정하려면 어떻게 해야하는지 알아봅시다. 저번시간 숙제 >> function App(){ let [글제목, b] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( 개발 blog { 글제목[0] } 2월 17일 발행 { 글제목[1] } 2월 17일 발행 { 글제목[2] } 2월 17일 발행 ) } useState() 3번 써도 state 3개 만들 수 있는데 그게 귀찮으면 array자료를 이용하면 됩니다. 한 곳에 여러개의 문자를.. 2024. 4. 11. 중요한 데이터는 변수말고 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. 이전 1 2 3 4 5 6 7 8 ··· 17 다음 728x90 반응형
