월드스토리의 코딩 나라

Life Cycle이란?하나의 컴포넌트가 생성되었다가 다시 제거되는 과정을 일정한 단계로 구분한 것 Mount• DOM이 생성되고 웹 브라우저 상에 나타남Update• props or state 바뀌었을 때 업데이트함Unmount• 컴포넌트가 화면에서 사라질(제거될) 때   Class형 컴포넌트에서 사용하는 메서드  - 요즘은 잘 쓰이지 않음  constructor클래스형 컴포넌트에서 생성자를 정의하는 메서드입니다. 이 메서드는 컴포넌트가 인스턴스화될 때 호출되며, 컴포넌트의 초기 상태를 설정하거나 바인딩 작업 등을 할 때 사용됩니다.즉, 컴포넌트의 초기 상태를 설정하는 컴포넌트render함수형 컴포넌트에서 return 문 부분을 담당하는 함수getDerivedStateFromProps이 메서드는 컴포넌..

Ref 란?• 전역적으로 작동하지 않고 컴포넌트 내부에서 선언 및 사용• 동일한 컴포넌트를 반복해 사용해도 각 컴포넌트 내부에서만 동작해서 중복되지 않음• DOM을 직접적으로 건드려야 할 때 사용 Ref 사용하기 - 클래스 형 컴포넌트  1. 콜백함수를 사용한 방법- 사용하고자 하는 DOM 요소에 ref 라는 콜백 함수 작성 및 props로 전달 - ref 를 컴포넌트의 멤버 변수로 설정하는데, 이때 ref는 원하는 대로 사용 가능 - 한마디로 ref의 명칭은 아무거나 해도 인식함- this라는 내부 공간에 주소값을 담는 공간을 만드는 식이라고 생각하면 될듯.2. 내장함수createRef - React.createRef 함수를 이용해 컴포넌트 내부에서 변수에 ref 요소를 담아준다.- 이때만든 input..

단축평가란? • 논리 연산자를 사용하여 특정 조건에 따라 값을 결정하거나, 조건에 따라 특정 코드를 실행하는 방법  && 연산자A가 falseB는 아예 확인하지 않고 바로 A의 값을 반환합니다. A가 true만약 A가 true 라면, B의 값을 확인.이 경우, B의 값이 반환됩 니다.  || 연산자A가 falseB의 값을 확인해야 합니다. 이 경우, B의 값이 반환됩니다.A가 trueB는 아예 확인하지 않고 바로 A의 값을 반환합니다.

map() 함수• map()의 인자로 넘겨지는 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용.• map() 함수를 필요에 따라 반복문처럼 사용할 수도 있음.• 리엑트의 return 문 내부에서  사용이 가능한 것이 가장 큰 특징 map() 함수 문법용어 의미callbackFunction• 새로운 배열의 요소를 생성하는 함수로, currentValue, index, array 3개의 인 수를 가질 수 있다.[this.Arg]•  필요 없으면 생략이 가능하며, callbackFunction에서 사용할 this 객체를 의미함  map() 함수의 사용 방법txtlist 를 순서대로 돌면서 나오는 값id방금 나온 값(txt)의 인덱스arr현재 반복을 돌고 있는 배열key• 기존 요소와 ..

Event Handling의 차이 Event 적용 방법의 차이형식 사진HTML에서 사용하던 형식React에서 사용하던 형식1. React의 이벤트는 소문자가 아닌 카멜 케이스(camelCase) 이용2. JSX를 사용해 이벤트 핸들러 전달하며, 직접 만든 컴포넌트에는 이벤트가 아닌 Props로 전달해야 함.3. 즉, 전달 후 컴포넌트 내 기본 컴포넌트에 연결하는 것  React 합성 이벤트• Synthetic Event ( 합성 이벤트 )•  React에서 사용하는 이벤트는 브라우저의 기본 이벤트가 아니다!• 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper(래퍼) 객체합성 이벤트(SyntheticEvent) – React  클래스 컴포넌트에서의 이벤트 • 클래스형 컴포넌트에서는 this를..

props란?• properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 • props는 컴포넌트끼리 값을 전달하는 수단 • 상위 컴포넌트에서 하위 컴포넌트로 전달 (단방향 데이터 흐름) 함수형 컴포넌트 props // 부모 컴포넌트에서의 모습const Funccomponent = (props) => { return ( 안녕? {props.name} 반가워! );} //자식 컴포넌트에서의 모습Funccomponent.defaultProps = { name : '홍길동'} //자식 컴포넌트에서 기본값 설정• 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터 로 전달받으며, JSX 내부에서 { } 기호..

JSX•  JavaScript + XML의 합성어• 자바스크립트 확장 문법으로 XML 과 유사• 바벨을 이용해 일반 자바스크립트 코드로 변환  JSX 문법 정리1. 전체는 하나의 태그로 html 태그는 항상 return 이후에, 반드시 하나의 부모 요소가 전체 요소를 감싸는 형태로!html with JShtml를 작성하다가 중간에 js문법을 사용하고 싶을 때는 {중괄호}로 감싸야 합니다.단, for문과 if 문은  return 내부에서 사용할 수 없고, 삼항 연산자를 사용해야 함인라인 style 적용• CSS 를 인라인 형태로 적용할 때는 {object}형태로 저장해야 함• CSS 속성은 dash-case →camelCase • 그 덕분에 인라인으로 작성된 정보를 따로 {} 객체 형태로 빼내어 변수화하는..

Component• React의 꽃이라 불리는 React의 핵심이자 화면을 구성하는 하나의 부품• 내부의 데이터만 변경해서 전체적인 틀(UI)을 재사용 가능• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으 로 나누어 분리 가능 Component 트리 구조React 컴포넌트 종류 클래스형 컴포넌트 (Class Component)• render 함수를 반드시 사용해야 함 • lifecycle 기능 • 컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용 함수형 컴포넌트 (Functional Component)• 짧고 직관적이며, 사용방법이 더 간단함 • 메모리 사용에 이점이 있음   클래스형 컴포넌트 vs.함수형 컴포넌트React 초창기에는 함수형 컴포넌트에는 현..

create-react-app를 이용한 React 프로젝트 생성하기• 리액트 앱(프로젝트)은 대문자는 사용 불가능이며, 단어 여러개 사용시 하이픈 기호로 구분함•  npx create-react-app [React App name] 해당 명령어를 사용하면 손쉽게 React프로젝트의 기본 뼈대를 생성할 수 있음npx는 npm의 자식 명령어로 npm보다 가볍게 패키지를 구성함npm버전이 5.2 이상일 때, node 버전이 14 이상일 때 사용 가능npm start 명령어를 이용하여, 만들어놓은 리엑트 구조를 실행할 수 있음 create-react-app으로 생성한 프로젝트의 구조   /node_modulesnpm 을 시작하면 생기는 폴더, 내부에 모듈과 관련된 정보가 들어있음/publicindex.html ..

React란?• 화면을 만들기 위한 자바스크립트 라이브러리• 현재 프론트엔드 개발 환경에서 가장 많이 활용되고 있는 라이브러리• 사용자와 상호 작용이 가능한 동적 UI 제작 가능 React의 특징 4가지특징 종류의미Data Flow• 양방향 X 단방향 O 데이터 흐름 • Angular JS 처럼 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐 름을 추적하기 힘들고 복잡해지는 경향이 있다. Component 기반 구조• Component : 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적 인 하나의 부품으로 만드는 방법 • React는 UI(View)를 여러 Component를 쪼개서 만들기에 코드 파악이 쉽다.• 한 페이지 내에서 여러 부분을 Component로 만들고 이를 조립해 화면을 구성하..