Je개발 일지

[ 리렌더링이란? ] 바닐라 자바스크립트의 경우 변경되면 Element 를 처음부터 끝까지 다시 그린다. 만약에 내가 하지만, React 의 경우에는 변경된 부분만을 다시 그린다. 이런 점을 SPA (Single Page Application) 의 특징이라고 부른다. 만약, 티스토리 블로그에서 게시글 리스트를 보다 1페이지에서 2페이지로 넘어갔다고 생각해보자. 그러면 렌더링 되는(화면에 보여지는) 게시글 리스트들은 달라지지만 화면에 보이는 전체적인 레이아웃(한 번에 게시글 몇 개만 보여주는 등)이나, 블로그 이름과 같이 달라지지 않는 내용들도 존재할 것이다. 이전에 바닐라 자바스크립트로만 개발을 한 경우라면 이 변하지 않는 골격이나 달라지지 않는 내용들도 모두 다시 한 번 렌더링 해야 했다. 하지만, S..

1. React 로 DOM 렌더링하기 2. JSX 활용하기 JSX 란? 문자도, HTML 도 아닌 자바스크립트의 확장 문법이다. 밑의 예제에서는 element 변수가 JSX 를 활용한 것이다. 그러나 일반 자바스크립트에서 JSX 문법을 사용할 수 없다. JSX 를 자바스크립트로 해석하기 위해서 자바스크립트 컴파일러로 Babel을 사용한다. 위의 내용은 아래와 같이 표현할 수 있다. Babel 은 script 태그에 CDN 을 이용해서 가져왔다. 이번에는 여러 태그들을 만들어서 넣어보도록 하자. 태그를 넣을 때 좋은 방법 중 하나는 React 가 반환하는 객체에서 children 을 이용하는 것이다. children 이 하위 태그들을 의미하기 때문. React JSX 문법에는 여러 Element 들을 사용..

저번 시간에 이어서 남은 과제를 수행하겠다. 1), 4), 6)은 했고 이제 input창 관리인 2), 3), 5) 남았다 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder ..

오늘 할 것을 설명하자면 옆의 사진들과 같다. CSS 는 편의상 margin 값만 추가했다. 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder 처리를 해줄 것이다. 6) 마지..

3-2) input 상태 관리하기 이번에 만들어 볼 건 input 창에서 사용자로부터 값을 입력받으면 바로 화면에 입력받은 값이 나오도록 설정하고 초기화 버튼까지 만들겠다. input 도 사용자로부터 입력을 받고 그에 따라 화면에 값이 나오는 동적인 상황이 발생하므로 useState를 사용해줘야 한다. 수도 코드를 작성하면 다음과 같다 1. useState를 통해 input의 기본값과 동적 상태 값을 구조분해 할당으로 가져온다. 2. 동적으로 변화될 값은 input으로 입력받는 내용이어야 한다. 3. 초기화용 버튼을 생성한다. 4. 초기화 버튼을 누르면 변화될 값이 빈 문자열로 바뀐다. 그렇다면 하나씩 작성해보도록 하자. 먼저 1번부터 하면 const [text, setText] = useState(''..

2-2) Children props 안에는 children이 들어갈 수 있다. children은 그 이름에서 유추할 수 있듯이 자식, 후손 요소들을 의미한다. 어떻게 사용되는지 다음 내용을 살펴보자. 먼저 App.js 를 다음과 같이 작성하면 나타나는 화면은 오른쪽 아래와 같다. 이번에 내가 해주고 싶은 일은 지금 나와있는 모든 요소들이 밋밋해서 전체적으로 통일성 있게 효과를 주고 싶다면 어떻게 해야할까? 하나하나 다 뜯어가며 고치기 보다는 이 모든 것을 한 번에 묶어서 효과를 주면 좋을 것 같다. Wrapper라는 새로운 js 파일을 만든 후 props 로 { children } 을 가져온다. 그러면 그 안의 모든 요소들을 가져오는 것과 같은 효과를 지니며 안의 내용들을 재사용한다. 물론 위의 결과물은..

1. 기본적인 법칙 1-1) 태그는 항상 닫혀 있어야 한다. 로 닫는 태그가 존재하거나 혹은 과 같이 Self closing이 돼야 한다. 1-2) 두개 이상의 태그는 반드시 하나의 태그로 감싸져 있어야 한다. 감싸고 있는 것은 굳이 이름있는 태그가 아니어도 된다. 과 같은 fragment로 감싸줘도 된다. 1-3) React 안에서 자바 스크립트 사용 방법 먼저, Java Script의 내용을 변수로 할당해준다. const Variable = "Value"; 이렇게 그냥 변수로 사요하면 된다. 그리고 저 변수 그리고 만약 div 내에서 저 자바 스크립트의 내용을 보여준다고 한다면 다음과 같이 변수를 { } 안에 감싸줘서 표현한다. {Variable} 1-4) 클래스 이름 짓기 만약 클래스 이름을 짓고 ..