javascript/react (19) 썸네일형 리스트형 [React] useState Hook 리액트는 웹 페이지에 동적인 느낌을 부여한다. 이때, 해당 페이지가 동적으로 작동하기 위해서는 해당 페이지를 수시로 업데이트 해야 하는데, 만약 이 업데이트를 단순히 while 루프로 구현한다면, 성능적인 부분에서 심각한 오버헤드가 발생할지도 모른다. 또한, 웹사이트는 보통 특정 정보를 지니고 있는 경우가 대부분인데, 리액트는 프론트엔드 단에서 작동하기 때문에, 이러한 정보를 사용자의 환경에서 지니고 있어야 한다. 이러한 다양한 이유에 기반하여 리액트는 State, 즉 상태를 프론트엔드 단에서 관리한다. State? 프로그램에서 State를 정의하는 방법은 상황에 따라 다양할 수 있지만, 가장 간단한 수준에서는 변수를 의미한다. 해당 흐름에서 State의 변화는 프로그램 내 변수들의 변화를 의미한다. 리.. [React] 컴포넌트 리액트의 컴포넌트는 자바스크립트로 구현된다. 이때 최근 리액트에서는 클래스 기반 컴포넌트보다는 함수형 컴포넌트를 좀 더 권장하는 추세인데, 해당 컴포넌트는 프로그래머가 구현하기 쉽도록 JSX 등을 통해 syntactic sugar 을 제공하고 있으나, 본질적으로는 단순한 함수이다. 이런 특성을 이해하면 리액트의 몇몇 특징을 이해하기 좋다. JSX는 Syntactic Sugar이다 웹을 어느정도 작동시키기 위해서는 html 및 자바스크립트가 필요하다. 이때 자바스크립트는 보통 논리 부분을 설계하고 구성하는데 사용되고, html은 시각적인 UI 부분을 구성하는데 사용된다. 따라서 웹 개발자의 입장에서는 UI를 구성하는데 표준처럼 사용하는 html을 그대로 사용할 수 있는 것이 좋을 것이다. JSX는 이런 흐.. [React] React에 대한 설명 리액트는 UI 제작을 위한 자바스크립트 라이브러리 중 하나로, 웹이나 앱 등 다양한 분야의 UI 개발에 사용될 수 있다. 공식 사이트에서는 해당 라이브러리의 특징을 아래와 같이 설명한다. Declaratives 프로그래밍 패러다임 중 하나로, 특정 프로그램의 동작을 수행하기 위한 Control flow나 logic 부분은 추상화하고, 대신에 프로그램에 대해 요구되는 결과가 무엇인지를 명시하는 방식으로, imparative의 개념과 반대된다. 예를 들어 택시를 통해 63빌딩에 가는 상황을 생각해보자. Imparative 방식은 도달하는 방법 자체에 초점을 맞춘다. 따라서 우리는 택시 기사에게 "100 미터 앞에서 우회전을 한 뒤에 1시 방향으로 500m를 가서 ..." 와 같이 특정 조건이나 루틴을 설명할.. 이전 1 2 3 다음
