웹 개발

목록 요소들을 반복처리 할때는 map함수를 이용 합니다. 반복 컴포넌트에는 반드시 key props를 전달해야 합니다. ★ map함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용 array.map(callbackFunction(currenValue, index, array), thisArg) currenValue: 현재값 index: 현재인덱스 arrayt: 현재배열, thisArg: callbackFunction 내에서 this로 사용될 값 const IterationComponent = () => { const arr = [1,2,3,4,5]; const newArr = arr.map( item => item*10 ) // => 한줄일 경우 리턴 console.log('map으로 생롭게 만들어..

이벤트 규칙 이벤트의 이름은 전부 카멜 표기법으로 표현됩니다. onkeyup -> onKeyUp 이벤트를 전달할 때는 {함수} 형태로 사용합니다 인풋값 핸들링 해보기 인풋의 값이 변화되는 이벤트 onChange 연결 이벤트 안 첫번째 매개변수에서 event객체 활용하기 (e.target.속성값) setter를 이용해서 state변경하기 const EventComponent = () => { const [name, setName] = useState(''); let handleName = (e) => { //2.event객체 활용 setName(e.target.value); //3.state변경 (input의 value도 변경) } return ( 리액트 이벤트 핸들링 {/*1. 이벤트연결*/} 체인지된 ..

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다 state가 체인지 되면 변화를 감지하여 리렌더링을 수행합니다. 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다릅니다. 함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능 합니다. 나의 첫번째 훅 useState(초기값) -> 함수형 컴포넌트에서만 사용가능. useState() : 배열반환 첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter) 를 반환합니다. const [data, setData] = useState('초기값') state는 어떤 타입이던 상관 없습니다. (str, number, object) state는 여러개 일 수도 있습니다. state는 직접 수정하면 안 됩니다...

1. 컴포넌트 * APP.JS 가 화면을 구현하는 최상위 객체가됨. * APP JS 아래에 컴포넌트들을 자식 객체로 넣는다. * APP만 있으면 화면 전체가 계속 리렌더링 됨. 따라서 APP 하위 객체로 컴포넌트들을 세분화 시켜서 한 화면에 세분화된 컴포넌트들을 리렌더링 시키는 것. #컴포넌트는 함수형, 클래스형 2가지입니다. *클래스형이 기본적이지만 사용하기 어려워서 리액트 측에서 함수형 컴포넌트를 제공. -리액트를 다루는 기술 책의 87p 참고. *함수형 function Welcome(props) { return Hello, {props.name}; } *클래스 import { Component } from "react"; class MyComponent3 extends Component{ //클래스..

*프레임워크란? -라이브러리들이 모여서 큰덩어리를 이루고 그것이 뼈대를 이루고 있는것이 프레임 워크 1. 리액트란? - 리액트는 자바스크립트 라이브러리 입니다. - 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리 입니다. SPA란? - Single Page Application의 줄임말 입니다. - index.html하나만 로드하고 실행시키는 구조입니다. 어떻게? 번들러(Webpack)가 이 모든것을 해줍니다. Webpack이란 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어서 조합하여 경량화 하여 결과물을 만들어 주는 도구입니다. 번들러는 node.JS를 통해 직접 설정 할 수 있지만, 리액트 프로젝트를 생성시 ..