월드스토리의 코딩 나라

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를..