React JS

실제 학습한 내용의 첫 포스팅이다. 아마 React가 어떤 라이브러리이며 어떤 철학을 가지고 있는지, 선언형 UI는 무엇인지 이런 것부터 포스팅 해야할 것 같은 느낌이지만 최대한 Practical하게 가려고 한다. Component Component는 SwiftUI에서 말하는 Component와 동일한 개념이다. 하나의 단위를 이루는 ui를 의미한다. ...

useState SwiftUI의 경우는 @State를 통해서 뷰의 상태를 관리할 수 있다. @State를 통해서 정의된 변수는 프레임워크가 별도로 관리하기 때문에 뷰가 리랜더에 영향을 받지 않는다. 그리고 해당 변수의 값이 변경되면 뷰가 리랜더링된다. useState도 동일한 개념이다. useState를 사용하면 getter와 setter 함수를 리턴 ...

useEffect의 경우 side effect를 수행하기 위해 만든 함수이다. SwiftUI로 치면 onAppear, onDisappear, onChange를 합친 기능이라고 보면 된다.첫번째 인자로 함수를 전달한다. 중요한 것은 두번째 인자인데 두번째 인자를 전달하지

어플리케이션을 만들다가 보면 비슷한 로직을 여러 군데의 뷰에서 같이 사용해야 하는 경우가 생긴다. 이럴 때 이 로직들을 Reducer로 묶어두면 유지 보수하기 쉬워진다. 특히 reducer는 state를 변경하는 로직을 모아두는 곳이다.SwiftUI에서 하나의 Obse

SwiftUI에서는 @State로 선언된 struct의 property를 변경하면 UI가 업데이트 된다. 왜냐하면 struct를 value type이기 때문에 property가 바뀌면 다른 값으로 인식하기 때문이다.React에서 useState()로 선언된 object

Context란 무엇인가? SwiftUI에는 EnvironmentObject라는 것이 있다. 이는 ObservableObject의 일종인데 간단하게 설명하면

이전 포스팅 들에서 리랜더링이란 말을 계속 써왔는데, React의 경우 리랜더링이 언제 일어날까? 바로 State의 값이 변경될 때이다. State 값이 변경되면 그 State 값을 가지고 있는 Component는 그 상태의 변경을 반영하기 위해서 리랜더링된다. 그렇다

지난 포스팅에서 아래 heavySum이라는 작업을 관련 없는 State가 업데이트 되었을 때는 실행되지 않도록 해서 성능을 개선했다.하지만 아래 코드의 문제점은 ChildComponent가 props가 바뀌지 않았는데도 계속 리랜더된다는 점이었다. 이런 문제점을 해결하

지난 포스팅 2개에서 useMemo와 React.memo를 활용해서 성능 최적화에 대해서 배웠다. 이번 포스팅은 내가 생각하기에는 앞선 2개의 기능 보다 그렇게 많이 사용할 것 같지는 않지만 비슷한 계열의 내용이기에 함께 포스팅한다.하지만 useCallback이 중요하

앱은 하나의 독립된 프로그램이다. 따라서 앱에서 다른 페이지로 이동할 때는 개발자가 정의한 방법(버튼을 탭한다던지..., NavBar의 백버튼을 탭하거나, TabBar의 버튼을 탭하거나)으로만 이동할 수 있다. 사용자에게 다른 화면으로 이동하고자 할 때 TabView

Header html 태그 중에 header라는 태그가 있다. 이 태그는 웹사이트의 이름이나 nav 등이 있는 사이트의 상단에 위치한 UI를 위해 사용한다. 이 header의 경우 다른 페이지로 이동하더라도 그대로 있는 경우가 많다. 그런데 router를 활용할 때

React에서 무한스크롤 구현하기

useEffect가 왜 계속 실행되었을까?