본문 바로가기
728x90
반응형

프로그래밍&IT/React & CSS

 (38)
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 강좌 내용 정리.7 - UI 제작패턴 (props 등 이용) UI 만드는 법 UI와 관련된 중요 정보들을 state로 저장해놓고 state에 따라서 UI가 수정되게 만든다 저번 내용 참조 React 강좌 내용 정리.5 - Component 기초, 사용하기 (기본 소스 포함) React 강좌 내용 정리.6 - map, for / props 목표 * 각 list의 제목을 클릭하면, Modal의 타이틀 변경해서 보여주기 1. 기본적인 내용을 state로 선언 function App() { // 글제목 state let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); // 누른제목의 index 번호를 저장하는 state let [누른제목,누른제목변경] = useState(0) 2. 글목록 관련된 내용 { // i :..
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 강좌 내용 정리.4 - state 변경 (버튼 기능 개발) 버튼 기능 개발 & 리액트 state 변경하기 먼저 크롬 브라우저에서 이모지 표시 tip 크롬의 주소 입력창에 마우스 오른쪽 버튼 클릭하면 그림 이모티콘이 항목이 나온다. 클릭 이벤트 설정하기 : onClick={ 클릭될 때 실행할 함수 } ={ ()=> {실행할 내용} } state는 그냥 변경이 안 된다. useState 만들 때 만들어둔 함수를 이용한다 let [좋아요, 좋아요변경] = useState(0); // 초기값으로 0 --- 클릭할 경우, 변경 함수를 이용해서 값을 넣는다. {글제목[0]} {좋아요변경(100) } }>👍{좋아요} let [좋아요, 좋아요변경] = useState(0); {글제목[0]} {좋아요변경(100)}}>👍{좋아요} // 만약 값을 1 씩 증가시키려 할 때 {글제목..
Coding Apple, React 강좌 내용 정리.3 - state React에서 state를 쓰는 이유, 방법을 알아보기 데이터를, 변수 (let , var)에 넣거나 state (useState() 이용해서) 에 넣거나 state 만드는 방법 1. import React, {useState} from 'react' - React에 있는 함수를 쓰겠다. useState를 쓰기 위해서 2. useState('저장할 값') * ES6 destructuring 문법 중에서 이 2개 데이터를 변수에 담고 싶으면 var [a, b] = [10, 100]; // var a = 10 , var b = 100 import React, {useState} from 'react' import logo from './logo.svg'; import './App.css'; function ..
Coding Apple, React 강좌 내용 정리.2- JSX 기본 문법 JSX? src / App.js의 내용을 확인하자 기본적인 javascript 함수가 나오는데 return 함수 내부는 일상적인 html 코드처럼 작성을 하되 특정 문법에 맞춰서 코딩을 한다 이 부분이 JSX. html 의 class를 쓸 수가 없고, className을 사용한다 스타일링 (css ) - import 된 App.css 파일에서 관리를 하게 된다 실제 표시될 부분과 css (스타일링)은 별도로 구분해서 코딩한다. 확인하기 : black-nav라는 이름으로 새로운 div를 만들고, 그에 따른 스타일링을 App.css에 추가한다. 일단 평상시 쓰던 html / css처럼 만든다고 생각하자. 데이터 바인딩 : 왜 리액트를 쓰고, Vuew를 쓰고 하는지에 대한 이유 * 데이터를 html에 표시하는..
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..
반응형

티스토리툴바