Study/React(4)
-
Chapter 4-2 LifeCycle
공부한 내용을 기록 및 정리를 위한 글로 더 정확하고 많은 정보를 원하시면 맨 아래 링크를 참고해주세요. 1. 컴포넌트가 로딩되기 시작하는 Mount(생성)constructorclass ClassComponent extends Component { state = { value: 0 }; constructor(props) { console.log("[class] constructor"); super(props); this.state = { value: 0 }; }constructor는 클래스 생성자로 state의 초기 상태를 지정해줍니다.위 형태와 같이 super(props)를 해주어야 합니다.super(props)를 호출하지 않으면 this를 사용할 수 없고, this.state나 ..
2025.03.03 -
Chapter 4 Hooks
state가 변할 때마다 리렌더링 된다는 사실 useState : 상태 값과 그 값을 갱신하는 함수를 반환const [value, setValue] = useState(0);인자 : 초기 상태 값반환 : [상태 변수, 상태에 대한 setter]동작 방식 : setValue는 모든 함수가 완료된 이후에 마지막에 몰아서 상태 변환 useEffect : 컴포넌트가 렌더링 될 때, 특정 작업을 실행추가 설명 : 컴포넌트가 화면에 처음 나타나고, 사라지게 될 때를 제어할 수 있다. useEffect(()=> {(수행되는 작업)}, [의존되는 값들])외존되는 값의 배열이 비어있으면, 컴포넌트가 처음 생성 될 때만 실행된다.컴포넌트가 화면에서 사라질 때는 return 해서 코드를 작성해주면 된다. function C..
2025.03.02 -
Chapter 03 컴포넌트
저번에 jsx에 대해서 공부해보았는데요.이번에는 컴포넌트,props, state, 클래스형 컴포넌트 vs 함수형 컴포넌트를 공부하였습니다.공부한 내용을 기록하기 위해 올리는 것이기에 많은 내용들이 섞여있을 수 있습니다. 컴포넌트스스로 상태를 관리하는 캡슐화된 코드 조각import "./App.css";import Hello from "./components/Hello";import World from "./components/World";function App() { return ( );}export default App;이 코드는 root 컴포넌트를 모아두는 App에 Hello나 World를 각 컴포넌트로 만들어서 태그의 형태로 넣어주었습니다. 컴포넌트의 룰컴포넌..
2025.03.01 -
Expo 안드로이드 Amulator와 연동
React Native로 앱을 만들고 싶어서 공부하려고 합니다.앱을 만들려면 개발 환경 세팅이 기본입니다.개발 환경을 두 가지 정도로 나눠서 세팅할 수 있습니다.Expo와 React Native CLI로 세팅할 수 있습니다.각 개발 환경마다 장단점이 있는 Expo가 간단하고 편리한 대신 복잡하고 섬세하게 제어를 못한다는 단점을 가지고 React Native CLI는 사용자가 직접 구성해야 한다는 어려움이 있었습니다.일단은 기본적인 앱을 만들면서 공부할 것이기에 Expo 개발 환경을 조성하려고 합니다. 그러나 Expo 개발 환경 세팅부터 문제가 발생했습니다.바로 Expo 안드로이드 Amulator를 연동하려고 하면 에러가 떴습니다바로 두 가지 문제점을 고치니 해결되었습니다.안되시는 분들은 참고 해주시길 바..
2025.02.25