221130 TIL

React

데이터를 State(내부 상태) Props(외부로 부터 전달받은 상태) 나타내는 render(함수에선 return)가 있다.

상태가 변경될 때 마다 re-render 됨

실제로 변경된 부분만 화면에 업데이트 됨

 

React : 컴포넌트 집합체

리액트 컴포넌트를 만드려면 함수 형태

함수 이름은 대문자로 시작

리턴하는 것은 컴포넌트가 UI에 어떻게 표기될것인지 명시하는 JSX 문법 사용해서 반환하기

 

컴포넌트는 꼭 하나의 태그를 반환해야 한다,

다수의 태그를 반환하고 싶으면 부모태그로 감싸야 한다 (<></> 텅텅 빈 태그 사용 가능)

class를 사용할 때는 className을 사용해야 한다.

JSX는 자바스크립트에서 작성하는 문법이기 때문에 중간 중간 JS를 작성할 수 있다.

다만, JS를 작성할 때는 중괄호로 묶어줘야 한다.

 

보충강의

코드를 여러번 써보면서 손에 익히기! 순서를 먼저 정리한 뒤 차례대로 코드 써내려가기!

 

● 함수는 반드시 선언하고 -> 실행해야 한다

● 먼저 구조를 짜고 코드 완성하기

// 함수 선언 방법은 3가지가 있는데 2가지만 쓰기로!

// 1. 
let func = function () {
	
}

// 2.
function func1 () {

}

 

자바스크립트만의 특별한 for문 -> in, of

const result = ['one', 'two', 'three'];

for (let item in result) {
    console.log(item) // --> index 0, 1, 2 출력
}

for (let item in result) {
    console.log(result[item]) // --> one, two, three 출력
}

for (let item of result) {
    console.log(item) // --> one, two, three 출력
}

 

함수에는 input과 output이 있음!

 

return

function test() {

	return 값
}

test(); <-- return 값

ex)

// 배열을 입력으로 받아서 최대값과 최소값을 구해 -> 새로운 배열 생성
// 배열로 넣어서 return 해주는 함수 만들기 -> push
// (math.Max / math.Min)


// 1. 배열을 입력으로 받아요
// 2. 빈 배열(결과 배열)을 만들어요
// 3. 최대값과 최소값을 구해요
// 4. 빈 배열에 넣어요.
// 5. 빈 배열을 return해요.


function test( inputArray) {
    // inputArray는 항상 배열만.

    let resultArray = [];

    // 3-1. 최대값을 구해요. 
    let maxValue = Math.max(...inputArray);
    // let maxValue = Math.max.apply(null, inputArray);
   
    // 원래 Math.max의 용도는
    // Math.max(1,2,3) -> 3
    // Math.max([1,2,3])  

    // [1, 2, 3] -> 1, 2, 3 : spread operation
    // 그냥 배열 앞에 ...을 붙이면 1, 2, 3으로 변환해줌!

    // 3-2. 최소값을 구해요.
    let minValue = Math.min(...inputArray);
   
    resultArray.push(maxValue);
    resultArray.push(minValue);

    return resultArray;
}

let result = test([1, 4, 2])
console.log(result)