01 - 30 ~ 02 - 05 정산

요약 : 알고리즘 마무리, 리액트 입문

 

정리

 

리액트 컴포넌트 구조 예시

버튼의 경우

function CustomButton(props){
  return<button onClick={props.onClick}> {props.children}</button>
}

자바스크립트의 함수형과 비슷하게 만들며 return으로 뭘 물려줄지를 결정한다.

 

state 기본 구조

state는 컴포넌트 내부에서 변경할 수 있는 값을 말한다. UI 리랜더링을 위한 변수라고 생각하면 된다.

const [users, setUsers] = useState([
   { id: 1, age: 30, name: '송중기' },
   { id: 2, age: 24, name: '송강' },
   { id: 3, age: 21, name: '김유정' },
   { id: 4, age: 29, name: '구교환' },
 ]);
const[name, setName] = useState('')
const[age, setAge] = useState('')
 

filter(function(value) {return (조건문 뭐시기뭐시기)}).map(value) => return(컴포넌트 불러오고 값 넘겨서 생성)

이런 구조로 짜야 한다. map이 배열을 돌면서 값을 변경시키는 함수이고, filter는 조건에 맞는 값을 반환하는 함수이므로, filter로 찾는 값을 걸러내고 그걸 map으로 컴포넌트에 담아서 출력시키는 것이다.

 

소감

알고리즘 테스트 3번이 특히 기억에 남는다. 지뢰찾기 문제......그것이 정보처리기사 21년 3회 실기에 나왔던 것으로 기억한다. 진짜 사악했던 문제였는데......그걸 기억하며 예외처리 따박따박 박아가면서 만들었는데, 다 풀고 다른 동기들 푼 것을 보니 map이니 xy 사방찾기니 아주 로지컬한 방식을 써서 꽤나 신기했었다. 세상에나, 내가 너무 클래식한거야 아님 동기들이 인텔리한거야?