[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 2주차 후기

사전 직무 교육 2주차 회고

짧으면서도 길었던 사전 직무교육이 끝이났다..!

매일 9시부터 6시까지 수업을 듣는다는 것이 생각보다 더 힘들었지만, 막상 마지막날이 되니 너무 아쉽게 느껴지는걸 보니 너무 알찬 강의였던게 분명합니다,,,ㅎ

2주라는 짧은 시간동안 프론트엔드 개발자로 취업을 준비하는 저에게는 필요한 모든 주제를 배웠다고 생각하고 이제는 스스로 복습하고 내용을 추가하면서 진짜 내것으로 만드는 과정만 남았다!

좋은 강의해주신 수코딩님께 너무 감사드리구, 열심히 공부해서 프로젝트를 성공적으로 끝내고싶은 마음뿐입니당

알차디 알찬 사전직무교육 끝!

2주차 강의 복습 (1)

강의의 내용 중 일부분을 직접 복습하며 요약하고 내용을 추가하거나 예제를 변경한 내용입니다. 기본 출처는 [수코딩(https://www.sucoding.kr)]

React 기본 개념

가장 인기 있는 프레임워크(라이브러리)

• 강력한 커뮤니티
• 광범위한 생태계 : 다양한 서드파티 라이브러리와 도구 지원
• React Native를 이용하여 앱 제작 가능

가상 돔 (Virtual Dom)

• 리액트의 가장 큰 특징
• DOM (Document Object Model)이란?
  • 데이터 자료 구조 중 트리 구조 (돔 트리라고 하기도 함)
  • 웹브라우저에 표시되는 모든 UI구성 요소는 웹 브라우저 내부적으로 객체 형태로 관리됨 = DOM으로 변환되어 관리됨
  • 웹브라우저는 DOM의 구성 요소 중 일부를 변경하면, 그 일부와 연결된 모든 DOM을 업데이트 ⇒ DOM트리가 깊을 수록 작업비용 증가
• Virtual DOM 이란?
  • 기존의 DOM을 그대로 복사하여 리액트 내부 메모리에 저장
  • 코드의 변경사항이 발생하게 되면 복사한 DOM을 사용해서 변경사항을 처리→ 최종적으로 실제 DOM과 비교하여 변경된 부분만 업데이트
  • 변경에 대한 작업 비용이 낮고 효율적

컴포넌트

• 리액트의 핵심기능
• 웹의 구성 요소를 아주 작은 단위로 분할해서 재사용 가능하게 독립적인 코드로 작성한 것
• 재사용성, 가독성, 유지보수성 증가

React Hook

• React 버전 16.8부터 추가된 요소, 함수형 컴포넌트의 한계를 보완하며 클래스 컴포넌트는 더이상 권장하지 않게 됨

useState

• 상태유지값(state), 그 값을 갱신하는 함수(setState)를 반환
  • 배열 구조 분해를 사용하여 보통 [state,setState] 네이밍을 사용
• 최초 렌더링 하는 동안 반환된 state는 initialstate와 같음
• 반환된 함수만이 state를 변경할 수 있음
  • 콜백함수를 매개변수로 넘겨줄 경우, 그 함수는 이전 값을 받아 갱신된 값을 반환함
  • set함수는 다음 렌더링에서 반환할 useState에만 영향을 줌

//기본 형태
const [count, setCount] = useState(0);

function handleClick() {
  setName('Hand');
  console.log(name); // Hand가 아닌 이전값으로 출력됨
}

useRef

• 렌더링에 필요하지 않은 값을 참조할 수 있는 훅
• ref객체의 current 속성을 이용하여 사용
  • 태그의 ref속성으로 전달하여 연결
• state와는 다르게 ref.current는 변경되어도 컴포넌트 재렌더링이 되지 않음
• 보통 DOM을 조작하기 위해 사용 ex).focus()

//기본 구조
const ref = useRef(initialValue)

//DOM조작 예시
const inputRef = useRef(null);

function handleClick() {
  inputRef.current.focus();
}
  
return <input ref={inputRef} />;

useEffect

• 외부 시스템과 컴포넌트를 동기화하는 hook
• 콜백함수와, 의존성 배열을 매개변수로 받음
• 컴포넌트가 DOM에 추가된 이후 콜백함수를 실행
  • 비동기적으로 작동하기 때문에 보통 api호출에 사용
• 의존성 배열에 추가된 값이 변경되면 재렌더링
• 클래스형 컴포넌트에서 사용할 수 있는 컴포넌트 생명주기를 이용할 수 있음
  • 마운트 : 컴포넌트가 화면에 추가되었을때 함수 동작
  • 언마운트: 컴포넌트가 화면에서 제거된 이후 clean 코드(return문)이 실행

useEffect(()=>{},[])

[자세한 예시는 이후 실습에서 사용 예정]

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정