TIL) React State, Props, 알고리즘, StringifyJSON, TreeUI

학습 내용

- React state & props

- React event handler

- 알고리즘 문제해결

- 재귀함수

- StringifyJSON, TreeUI

 

 

React state & props

 

#Props vs State

- props : 외부로부터 전달받은 값으로 바꿀 수 없다.

1) 컴포넌트 입력값(property, 속성)으로 사용

2) 부모 컴포넌트로부터 전달받은 값

3) 객체(object) 형태

4) 읽기 전용

- state : 내부에서 변화하는 값. 바꿀 수 있음

- 데이터가 props인지 state인지 확인하는 법

1) 부모로부터 전달되는가? -> props

2) 시간이 지나도 변하지 않는가? -> props

3) 컴포넌트 안에서 다른 state나 props를 갖고 계산 가능한가? -> props

 

#state 사용법

- usestate 함수를 통해 state 상태 변경

- state를 갱신하려면 state 갱신 함수를 호출

- usestate 문법 : const[state 저장 변수, state 갱신 함수] = useState(상태 초기 값)

 

#state 사용에 useState 함수가 필요한 이유

- app 함수는 1번 실행되고 끝나기 때문에 state를 동적으로 변환시켜주기 위해선
useState 함수 필요. 
- useState 함수를 통해 state 갱신 함수가 실행되면 app 함수는 변경된 상태값으로 다시 실행
- useState 함수는 지역변수를 state 값과 state 갱신 함수를 갖는 배열로 변경시켜줌

 

 

React event handler

 

#React에서 이벤트 처리하는 방법

- JSX를 사용하여 '함수'로 이벤트 처리 전달

ex) <button onClick={handleEvent}>Event</button>

- event handler 함수

1) onChange : 입력값 제어

2) onClick : 클릭하였을 때 이벤트 발생

 

<a id={t.id} onClick={event=>
   { props.onChangeMode(event.target.id) }}

*event.target = event를 유발시킨 태그 a
*event.target.id -> a 태그의 id = {t.id}

 

 

알고리즘 문제 해결

 

#다양한 for문 사용법

- for(let 변수명 of 객체) : (배열 값 순환) 배열의 요소를 하나씩 불러와 실행

- for(let 변수명 in 객체) : (객체 순환) 객체의 요소를 처음부터 하나씩 불러와서 실행 = 키와 키 값 동시에 뽑을 때 사용

 

 

재귀함수

 

#재귀함수 템플릿

function recursive(input1, input2, ...){

if(문제를 더 이상 쪼갤 수 없을 경우){
return 단순한 문제의 해답
}

return 더 작은 문제로 새롭게 정의된 문제

}

#재귀함수 작성 팁

- 배열이 인자값으로 주어지면, head랑 body로 나눠서 생각

 

 

StringifyJSON

 

#JSON 개념

- Javascript Object Notation : 데이터 교환을 위해 만들어진 객체 형태 포맷

- JSON.stringify -> object type을 JSON으로 변환 -> 직렬화(serialize)된 데이터 -> JSON.parse ->JSON을 object type으로 변환(역직렬화, deserialize)

 

#JSON 포맷

- 키: 반드시 큰 따옴표 안에 기록("key")

- 문자열 값: 반드시 큰 따옴표 안에 기록("string")

- 키와 값 사기, 키-값 쌍 사이에는 공백있으면 안됨

 

기타 CSS 문법

 

#Checkbox checked 선택자로 하위 리스트 감추기

html
<input type='checkbox'>

css
input[type="checkbox"] ~ul {
display: none;
}

input[type="checkbox"]:checked ~ul {
display: block;
}

 

기타 Javascript 문법

 

#논리 연산

- 논리곱은 &&로 연산

P	Q	P AND Q
TRUE	TRUE	TRUE
TRUE	FALSE	FALSE
FALSE	TRUE	FALSE
FALSE	FALSE	FALSE

- 논리합은 ||로 연산

P	Q	P OR Q
TRUE	TRUE	TRUE
TRUE	FALSE	TRUE
FALSE	TRUE	TRUE
FALSE	FALSE	FALSE

 

#slice로 배열 자르기

- 방법: arr.slice(start, end), arr.slice(start)
- end번째 앞에서 잘림
- 뒤에서부터 세릴 때는 0번째부터 시작하는 게 아닌, -1번째부터 시작
example) arr.slice(0,-1) = 첫번 째 값부터 끝에서 2번째까지 자르기 

 

#typeof obj로 객체 type 확인

 

#객체 속성
- 객체의 요소(property, 속성)은 key : value 값으로 구성
- 속성 접근법 : obj.key
- 객체 안에 함수 넣을 수 있음. 객체의 속성이 함수인 것을 method라고 부름

- 객체는 index값 가지지 않으므로 .length 함수로 길이를 계산할 수 없음.

obj = { functions : function new(){} }

ex) console.log() -> console이라는 객체의 log() 함수를 호출한 것

- key-value 쌍이 아니라도 가능

 

#배열 = array
- 배열의 각각의 값 = 요소(item)

- 배열도 object의 일종

# if continue 구문

- if 문 통과한 대상에 대해서는 어떠한 행위도 하지 않고 통과할 때 사용

 

 

#... (three dot) 활용, ...이란?

- 두 가지 활용법 가짐
1)rest parameter : argument들이 배열로 함수 내부에 전달
2)spread operator로 사용 : 배열이 개별 원소로 전달됨
-> 즉 하나하나 까는 for문 넣지 않아도 알아서 개별 원소로 function 내에서 처리함

ex) 
arr = [1,2,3]
Math.max(arr) --> NaN
Math.max(..arr) --> 3

 

# 값 붙이기

- concat : 배열에 값 붙일 때 사용

1) 배열의 요소들을 하나하나씩 문자열로 추가한다

2) 배열전체를 리턴한다.

 

- push : 배열에 값 붙일 때 사용

1) 배열이 하나 통째로 뒤에 붙는다.

2) 배열의 길이를 리턴한다.

 

 

[참고]

https://velog.io/@yunkuk/TIL-03objectVSarray.

object 와 array의 공통점과 차이점

https://minjoo-space.tistory.com/52

[JavaScript] push() & concat()

https://opentutorials.org/course/4900/31266

props - 생활코딩

https://opentutorials.org/course/4900/31267

이벤트 - 생활코딩

https://opentutorials.org/course/4900/31268

state - 생활코딩