React (16) 썸네일형 리스트형 map() 함수 map함수 용도 반복되는 컴포넌트를 랜더링 가능 map함수 문법 arr.map(callback, [thisArg]) callback 새로운 배열의 요소를 생성하는 함수 파라미터 종류 currentValue 현재 처리하고 있는 요소 index 현재 처리하고 있는 요소의 index값 array 현재 처리하고 있는 원본 배열 thisArg (선택 항목) callback 함수 내부에서 사용할 this 레퍼런스 예제 var numbers = [1, 2, 3, 4, 5]; const result = numbers.map(num => num * num); console.log(result); import React from 'react'; const IterationSample = () => { const names.. useReducer reducer 정의 상태를 업데이트하는 함수 구조 파라미터 현재 상태, 액션 객체 반환값 새로운 상태 문법 function reducer(객체, action) {} useReducer 문법 useReducer(reducer함수, 기본값); 반환값 number : 현재 상태 dispatch : 액션 발생시키는 함수 EventHandling 이벤트 사용 시, 주의사항 이벤트 이름 : 카멜 표기법 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값 전달 함수 형태의 객체 전달 DOM 요소에만 이벤트 설정 가능 즉, div, button, input, form, span 등의 DOM요소에만 이벤트 설정 가능 직접 만든 컴포넌트에는 이벤트 자체 설정 X ex) MyConponent에 onClick값을 설정하면, MyComponent를 클릭할 때 doSomething함수 실행하는 것이 아니라 그냥 이름이 MyComponent에게 onClick (props)를 전달 예제 e객체를 콘솔창에 출력 import React, {Component} from 'react'; class EventPractice extends Compone.. Hooks 1. useState 값을 변경하는 훅 2. useEffect 랜더링될 때마다 특정 작업을 수행하도록 설정하는 훅 const Info = () => { useEffect(() => { console.log('렌더링 성공'); console.log({ name, nickname }); }); }; 마운트될 때만 실행하고 싶을 때 함수의 두 번째 파라미터에 비어있는 배열 넣어주기 두 번째 파라미터에 값을 넣어주면, 그 값이 업데이트 될 때마다 useEffect(); 실행됨. useEffect(() => { console.log('마운트될 때만 실행'); }, []); 특정 값이 업데이트될 때만 실행하고 싶을 때 name이 업데이트될 때만, 업데이트를 콘솔창에 출력. useEffect(() => { conso.. 파일 쓰임새 package.json 해당 프로젝트가 의존하고 있는 모든 패키지 이름, 버전 나열 패키지 관리 도구로 yarn 또는 npm를 사용하든 모두 해당 package-lock.json 파일 npm의 패키지 잠금 파일 yarn.lock 파일 yarn의 패키지 잠금 파일 깃허브에 node_modules를 제외하고 올리면 다른 사용자가 해당 프로젝트의 yarn install할 때, yarn.lock에 저장된 버전들을 그대로 다운받음. React 기초 초기 렌더링 컴포넌트 정의 import React from 'react'; node_modules 디렉터리의 react모듈을 가져와서 사용 jsx 특징 보기 쉬움 높은 활용도 jsx 규칙 부모에 의해 감싸인 요소 자바스크립트 표현 if문 대신 조건부 연산자 if문 대신 삼항 연산자 사용 AND연산자(&&)를 사용한 조건부 렌더링 import React from 'react'; function App() { const name = '리리액액트트'; return {name === '리액트' && 리액트입니다.}; } export default App; undefined를 렌더링하지 않기 함수에서 undefined만 반환하는 렌더링 상황을 만들면 안 됨. undefied일 때, 보여주고 싶은 문구가 있는 경우.. 이전 1 2 다음
