Project 기록/컴공 커뮤니티(web) (5) 썸네일형 리스트형 [react] 저장된 데이터 불러올 때 줄바꿈을 어케할까(개행,줄바꿈,\n,split,textarea) 게시물의 에 다음과 같이 쳤는데 결과를 보면 줄바꿈이 안 되어 있다 디비 저장시 \n과 함께 저장이 되는데 React.js 에선 이 취약점을 원천차단하기위하여 그냥 무조건 텍스트형태로만 렌더링하게 설정되어 있다고한다. => 불러 올 때 react는 \n처리를 안해준다 출력할 사이 난 this.props.data.content에 내용 데이터가 들어있다 \n 기준으로 자르고 line마다 태그를 사용해 준다 {this.props.data.content.split("\n").map((line) => { //this.props.data.content: 내용 return ( {line} ); })} {/* {this.props.data.content} */} 결과: 잘나온다 참고:velopert.com/1896 [.. 게시판만들기 db에 저장된 데이터를 목록으로 보여주자(react,mysql) ↓↓↓↓↓ 지난 번에 미리 초기화한 객체배열을 리스트로 보여줬다 꼭 보시길 ㅜㅜ coding-hwije.tistory.com/56 게시판만들기 데이터를 목록으로 보여주자(react,list,map) 만들고 잇는 게시판 게시물인데 밋밋하다 댓글 리스트를 보여주고 싶다 먼저 데이터 리스트가 필요하다 바로 반응하기 위해서 난 state값으로 list이름의 배열을 만들어 줫다 class Boardreple extends Co coding-hwije.tistory.com 저번 게시물에 만든 목록인데 미리 초기화가 아니라 디비에서 가져오고 싶다 먼저 데이터 리스트가 필요하다 class Boardreple extends Component { constructor(props) { super(props); this.st.. 게시판만들기 데이터를 목록으로 보여주자(react,list,map) 만들고 잇는 게시판 게시물인데 밋밋하다 댓글 리스트를 보여주고 싶다 먼저 데이터 리스트가 필요하다 바로 반응하기 위해서 난 state값으로 list이름의 배열을 만들어 줫다 class Boardreple extends Component { constructor(props) { super(props); this.state = { list: [], // ( // 리스트를 하나씩 살펴본다 //이제 표현 하고싶은데로 하면 됨 //현재 객체의 number {list.nick} //현재 객체의 nick {list.time} //현재 객체의 time 좋아요: {list.recomend} //현재 객체의 recomend {list.reple} //현재 객체의 reple )); return {content}; //여기서.. [javascript] 현재 시간/날짜를 알고싶다(Date(), getDate,getFullYear,getHours..) 게시판 댓글을 만드는 중이다 등록을 하면 현재의 날짜와 시간 정보가 업로드 됐으면 좋겠다 어케구할까 Date(); 데이트라고 기본 제공 해준다. 아래와 같이 사용하면 date data타입을 반환한다. let time = new Date(); //현재 날짜와 시간 let time = new Date(1996,05,18,6,00); let time = new Date('2996-05-18 06:00:00'); 그리고 time에서 getFullYear() :연도 getMonth() : 달 (+1)해야됨 getDate() : 날짜 getDay() : 요일 getHours() : 시간 getminutes() : 분 getMilliseconds() : 밀리 초 getSeconds(): 초 getTime(): UNI.. [react]하위 컴포넌트에서 props변화 감지 어케할까(componentDidUpdate) 졸작으로 웹만들고 있다 상단에 다른 카테고리를 누르면 (현재 C) 게시판 목록은 바뀌는데 띄워놨던 게시물 컴포넌트가 남아있다 메뉴를 새로 선택할 때 마다 게시판 컴포넌트를 끄고 싶다 상위 컴포넌트 : 에서 어떤 메뉴선택을 햇는지 state값이 바뀌고 clickmenu: "C", // or Java ,Python ,Javascript... 하위 컴포넌트 : 에서 contentOn: state값을 이용해 키고껏다가 제어한다 contentOn: "none", (하위)에 무엇을 클릭했는지 전달 했다. import BoardMete from "./boardMete"; // 게시물 컴포넌트 . . render( 하위컴포넌트가 props의 변화할때를 감지하고 그때 명령을 주고싶다 결국 이말하고 하고싶은거였다 comp.. 이전 1 다음
