본문 바로가기
728x90
반응형

react 기초

 (4)
Coding Apple, React 강좌 내용 정리.8 - 리액트에서 사용자의 input 처리 저번내용 & 소스 React 강좌 내용 정리.7 - UI 제작패턴 (props 등 이용) ; full source 포함 태그를 사용 사용자가 input에 입력한 값을 state로 저장해보기 1. 먼저 저장공간을 만들어두기 let [입력값, 입력값변경] = useState(''); // '' 값으로 초기화한 "입력값" 2. 뭔가 입력이 될 때 안의 함수가 실행된다 { console.log('Hello')} }> 사용자가 입력한 값? e.target.value {console.log(e.target.value)} }> 결과값 3. 확인을 했으니, state값 저장, 변경 { 입력값변경(e.target.value)} }> map반복문으로 돌린 html에는 key={}가 필요 // i : 반복문의 index 글..
Coding Apple, React 강좌 내용 정리.6 - map, for / props React 강좌 내용 정리. 5 반복 사용 관련해서 JSX 중괄호 내에 for 못 넣는다. -> { map() } 사용해서 html 코드를 반복시킨다. map() ? array내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 array.map(callbackFunction(currentValue, index, array), thisArg) ex) var arr = [1,2,3]; var newArray = arr.map( function(currentValue, index, array){ return currentValue * 2; } ); // newArray = [2,4,6] 결국 (유사) 반복문처럼 사용된다. 반복문 쓰는 법 { 반복할 데이터.map( ()=> { return } ) } { 글제목..
Coding Appl , React 강좌 내용 정리.5 - Component 기초, 사용하기 Component 기초 html을 줄여서 쓸 수 있는 방법? Component 문법 소스 관리가 쉬워진다. 페이지 구분은 라우터(?)를 써야 하는데, 그건 나중에... css 체크 .modal { padding: 20px; margin-top: 20px; background: #eee; } function App() { let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); let [좋아요, 좋아요변경] = useState(0); let posts = '강남 고기 맛집'; return ( 개발 blog {글제목[0]} {좋아요변경(좋아요+1) } }>👍{좋아요} 2월 17일 발생 {글제목[1]} 2월 17일 발생 {글제목[2]} 2월 17일 발생 /..
Coding Apple, React 강좌 내용 정리. 1 - 개발환경 구성, 설치 프로젝트 구성 React? (React 링크) 여러 자바스크립트 라이브러리 중에서 페이스북에서 개발되어 공개되었다. 개발 환경 구성 개발 툴 / 에디터로서 Visual Studio Code를 받고 설치한다. Visual Studio Code 설치 (VS Code download) React를 학습하기위해서, Node.js를 받아서 설치해야 한다. Node.js 설치 (Node.js download) React 작업할 폴더를 선택 VS Code에서 File -> Open Folder로 선택 React 프로젝트 생성 VS Code에서 Terminal을 열고, nxp 명령어 그리고 생성할 프로젝트 이름 ex) npx create-react-app blog - blog란 프로젝트를 만들겠다. 그러면 아래처럼 진행이 된다. n..
반응형

티스토리툴바