본문 바로가기

react15

React - Form 사용하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 HTML 에서 사용할 수 밖에 없지만, React 에서는 동작이 다르게 이루어지는 Form Element 에 대해 알아보도록 하겠습니다. 이번 포스팅은 다소 난해할 수 있기 때문에, 최대한 풀어서 작성해보도록 하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 먼저 이를 이해하기 위해서는 Component 의 개념으로 접근해야 합니다. 기존의 HTML 에서의 Form Element 는, "제어(Controller)", "비제어(unController)" Component 로 분류할 수 있습니다. 여기서 말하는 제어와 비제어의 차이는, 제어의 경우 Form Element 의 처리를.. 2023. 3. 6.
React - List & Key 사용하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 배열(Array) 를 사용하여 List, Key 를 사용하는 방법을 알아보도록 하겠습니다. 기존의 포스팅에서는 객체(Object) 위주로의 작성이 이루어졌다면, 이제 Array 를 이용해 List 를 만들고 각 항목에 그에 맞는 Key 를 사용하는 방법을 알아보도록 하겠습니다. =========== HTML 삽입 미리보기할 수 없는 소스 =========== HTML 삽입 미리보기할 수 없는 소스 먼저 이를 위해서는 JavaScript 의 map method를 잘 이용해야 합니다. map method 를 사용하면 결과값을 배열로 반환할 수 있기 때문에, 이를 이용하면 쉽게 Array 배열을 만들 수 있습니다. 즉, Map method 는 항.. 2023. 3. 6.
React - 조건부 랜더링 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서의 조건부 랜더링을 알아보도록 하겠습니다. 기존의 제 프로젝트나, 작성에서는 Nunjucks 를 이용하여, If 문등을 사용하여 작성했습니다. React 역시도 기본적으로는 If 나 조건부 연산자 등을 이용해서 작성을 하게 됩니다. 이를 자세하게 살펴보도록 하겠습니다. ============ HTML 삽입 미리보기할 수 없는 소스 ============ HTML 삽입 미리보기할 수 없는 소스 class Test extends React.Component { render() { const isLoggedIn = this.props.isLoggedIn if (isLoggedIn) { return Hynn Tistory Blog } else { r.. 2023. 2. 28.
React - 이벤트 처리하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 이벤트를 어떻게 처리하는지에 대해 알아보도록 하겠습니다. DOM Elemenet 와 비슷하지만, 조금 다른 특징을 가지고 있기 때문에 이에 대해서도 인지를 하면 보다 효율적으로 작성이 가능합니다. 그럼 시작하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 React 에서 이벤트 표기는 CamelCase 를 사용하여 표기해야 합니다. CamelCase 는 비단 React 뿐 아니라, Programming 언어에서 일반적으로 사용되는 표기법입니다. 이것은 여러개의 단어를 하나의 이름으로 결합하고, 첫번째 단어만 소문자로, 그리고 난 뒤 각 단어의 첫글자를 대문자로 .. 2023. 2. 27.
React - 생명주기(Life Cycle) 및 State 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 생명주기(Life Cycle), 그리고 State 에 대해서 알아보도록 하겠습니다. React 의 기초사항으로 이 포스팅은 아마도 총 12개의 주제로 모두 세분화하여 업데이트를 할 예정입니다. 그럼 시작해보도록 하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 먼저 이전 포스팅에서 사용한 시계를 React 에서 구현한 코드를 가지고 그대로 사용을 해보도록 하겠습니다. 이전 포스팅, Element 단위 이해하기 포스팅에서 다루었던 코드를 그대로 활용할 예정입니다. 이전 포스팅에서 UI 를 업데이트 하는 방법은, 오직 "root.render()" 를 이용하여 출력하는 것을 배웠고,.. 2023. 2. 27.
React - Component & Props 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 가장 중요하게 다루게 될 Component & Props 에 대해서 알아보도록 하겠습니다. React 를 다루기 위해서 가장 중요한 개념이 될 두가지를 알아보도록 하겠습니다. ========= HTML 삽입 미리보기할 수 없는 소스 ========= HTML 삽입 미리보기할 수 없는 소스 Component 는 크게 "Function Component", "Class Component" 두가지가 존재합니다. 즉 함수형 컴포넌트, 클래스 컴포넌트라고 불리우게 되는데, 이는 이미 JavaScript 에서 우리가 작성을 해보았던 개념입니다. 예시를 간단하게 살펴보도록 하겠습니다. 1) Function Component const Text = (pr.. 2023. 2. 24.